Create default autoresponder template for specific app

Table of content:

1. Prerequisites
2. Key files
3. Adding a new template to the Powrzilla
   1. Heading to the POWRzilla project
   2. Personalisation
4. Loom Video as a Summary

Prerequisites

1. Latest changes of the main or rebased current branch
2. Running localhost:3000 (all containers running)

Key files:

1. app/controllers/powrzilla_controller.rb
2. app/helpers/powrzilla_helper.rb
3. app/javascript/modules/powrzilla/defaults.jsx
4. app/javascript/packs/powrzilla-editor.jsx

Adding a new template to the Powrzilla

What is POWRzilla? It is a project inside of the POWR that can manipulate with DOM elements to create a forms for the emails. The emails can be custom and default. If you are here we are going to create a new template for the new app.

Heading to the POWRzilla project

Open a folder app/javascript/modules/powrzilla, you will see most of the powrzilla project files. We need to alter the defaults.jsx file.

The defaults.jsx file contains a lot of functions, but we need only 2 to add a new default template to the specific app.

Find out the function

  export default function() {
    return {
      .
      .
      .
    }

We need to create a new object with Meta and Rows suffixes.

Let's start with the Meta suffix.

Meta suffix means it will be changing the general parts. There are lot of attributes so we will stick to the important ones.

Add on empty object with naming: <app-name>Meta to the existing Meta objects. Copy the attributes from one of the existing Meta objects and your end result will look like this:

  .
  .
  .
  newAppMeta: {
    friendlyFrom: (CURRENT_USER || {}).first_name || 'POWR',
    replyTo: (CURRENT_USER || {}).email || '[email protected]',
    // Ask your PM/Designer/Figma what should be on the form `subject`
    subject: 'Appointment Confirmation',
    // Ask your PM/Designer/Figma what should be on the form `preheader`
    preheader: "Thank you for booking with us!",
    // Background of the powrzilla page. Usually white.
    'background-color': '#d7d7d7',
    templateName: `${APP_NAME} Email`,
  }
  .
  .

When you created this object, time to say to the powrzilla-editor that new template (formally for now) added to the project.

Find file named: app/javascript/packs/powrzilla-editor.jsx.

You should find these lines of code:

  .
  .
  .
  switch (META.app_namespace) {
  case 'paypalButton':
    this.defaultRows = defaults().paypalButtonRows;
    defaultMeta = defaults().paypalButtonMeta;
    this.defaultFooter = defaults().footer;
  break;
  case 'popup':
    this.defaultRows = defaults().popupRows;
    defaultMeta = defaults().popupMeta;
    this.defaultFooter = defaults().footer;
  break;
  .
  .
  .

The logic is the same, copy and paste the existing, name according to your app's namespace.

Your code should look like this:

  .
  .
  .
  switch (META.app_namespace) {
  case 'paypalButton':
    this.defaultRows = defaults().paypalButtonRows;
    defaultMeta = defaults().paypalButtonMeta;
    this.defaultFooter = defaults().footer;
  break;
  case 'popup':
    this.defaultRows = defaults().popupRows;
    defaultMeta = defaults().popupMeta;
    this.defaultFooter = defaults().footer;
  break;
  case '<newAppNamespace>':
    this.defaultRows = defaults().newAppRows;
    defaultMeta = defaults().newAppMeta;
    this.defaultFooter = defaults().footer;
  break;
  .
  .
  .

What is newAppRows? It is our next step. It is the front-end part of the powrzilla.

Let's come back to the file called: app/javascript/modules/powrzilla/defaults.jsx.

Inside of the same function defaults, under the Meta suffix objects, you will see the Rows suffixed objects. It is the spine and face of the template. The operation is the same as we did with Meta. Copy => Paste => Name <newAppNameRows>.

Change some text inside of the <p> or <span> DOM elements of the <newAppNameRows> object.

If your webpacker is not failing and hasn't stopped yet, you should try to load the page with the new template.

Open your newApplication and find/create a button called Customize Autoresponder, click on it and you should be redirected to your newApplication's template.

If you see the text that you have written in the previous step, it means you have created a powrzilla template for the POWR application. There are a lot of Rows you can take and experiment with any of them to alter a new template.

Personalisation

What is Personalization? If your powrzilla template should take/exchange the data inside of its content, you should add personalizations. Usually the personalized data look like these: {{{First Name}}}, {{{Last Name}}} and {{{Phone Number}}} etc. It is the dynamic data that can be replaced by some real-world data. These keys are needed to be replaced by them.

To add personalized data we need last 2 (from list above) files called: app/controllers/powrzilla_controller.rb and app/helpers/powrzilla_helper.rb.

Inside of the file app/controllers/powrzilla_controller.rb you should find function called

  def editor
    .
    .
    .
  end

And then you will find the same patter from above:

  if email_type == 'marketing'
    form_response = marketing_form_response
        @premium_status = 'enterprise'
    elsif namespace == 'formBuilder'
        form_response = get_form_fields(app_id)
        form_url = "https://#{Rails.configuration.mailer_url_helper[:host]}/plugins/form-builder/standalone?id=#{app_id}?trigger=navsettings_tab&secondTrigger=confirmation_emailAccordion>div"
    elsif namespace == 'popup' && app_content['version'] == '2'
      form_response = get_form_fields(app_id)
      form_url = "https://#{Rails.configuration.mailer_url_helper[:host]}/plugins/popup/standalone?id=#{app_id}?trigger=navsettings_tab&secondTrigger=confirmation_emailAccordion>div"
    elsif namespace == 'paypalButton'
        form_response = payment_form_response
    elsif namespace == "appointments"
        form_response = appointment_form_response
    end

You should copy the one of them and add to the chain of the condition, in the end your code will look like this:

  elsif namespace == 'paypalButton'
    form_response = payment_form_response
  elsif namespace == "appointments"
    form_response = appointment_form_response
  elsif namespace == "<newAppNamespace>"
    # the `new_app_form_response` is the function that will be handled in the next section.
    form_response = new_app_form_response
  end

Let's move to the next file called: app/helpers/powrzilla_helper.rb. It is the helper that helps the function above.

In the end of the file before the class' end create a function that you declared before.

  module PowrzillaHelper
    .
    .
    .
    def new_app_form_response
      # Create an array that will have all of the form data inside. Check the functions above.
      [
        {
          label: "Phone",
          display_label: "Phone",
          idx: "phone" # This one will look like this in the template => `{{{Phone}}}`
        },
        .
        .
        .
      ]
    end
  end

Loom Video as a Summary

Link to the video