Send an Email When Status = Ready for Pickup From a Webhook

[marcmccall]

Hi all, total newbie here. I have a webhook in my ecommerce platform setup perform an HTTP POST to pipedream when I have an order update event. I’d like to send an email out for a will call order when the status = " Ready for Pickup" do nothing for any other statuses. It’s not something the platform supports yet so trying to solve it here.

Status = steps.trigger.event.body.data.object.status
Email = steps.trigger.event.body.data.object.customer.email
Order Number = steps.trigger.event.body.data.object.id
Name = steps.trigger.event.body.data.object.customer.name

Send to = Email
Subject line = Your order {Order Number} is ready for pickup
Body = Hello {Name} your order {Order Number} is ready for pickup…blah, blah, blah.

Any help getting in the right direction is greatly appreciated.

[pierce]

Hi @marcmccall

First off, welcome to the Pipedream community. Happy to have you!

Thanks the details.

I recommend using the HTTP Webhook trigger as the first step. You can see an example of a WooCommerce HTTP webhook trigger used in a workflow in this video:

Speed Run #2 :: Send SMS verification codes to WooCommerce orders with to FraudLabs Pro

Then you can use the Filter action to exit your workflow early if the order.status does not equal Ready for Pickup.

Then you can use your favorite mail provider like Sendgrid, MailChimp, MailerLite, etc to send the email to your customer from the order.

Here’s a video that features both the Filter and email actions:

Speed Run #9 - Send promotion emails with Shopify orders at random

[marcmccall]

@pierce thank you so much for the reply and details. I’m off and running already and have sent a couple test emails that are work exactly as I was hoping!!

[marcmccall]

Do you have a video for taking a JSON array from the HTTP responce and building it into a table? I have an array of items in steps.trigger.event.body.data.object.items.data I’d like to format aa a table.

Thanks Marc.

[pierce]

Hi @marcmccall , no not yet but that’s a great question.

If you ever want to see a specific workflow featured as a Speed Run video, you can request it here:⚡️ Request a Pipedream Speed Run ⚡️

If you just need to view this data in your workflow, you can use console.table instead of console.log in a Node.js code step.

What’s the destination for this data? Can you provide more screenshots or context on your workflow?

[marcmccall]

Hi @pierce once again thanks for the reply and suggestion on speed run.

Here is what my current workflow is doing.

1. I send pipedream a webhook with a JSON order object
2. Look for the Status “Ready to Pickup” with a filter. If not found exit.
3. Get Record from Data Store.
4. Filter if no record found continue, else exit.
5. Add Record to data store.
6. Using Postmark creating an email using the HTML body to create an email that looks like our system emails that send out so it’s constant with my site.

It looks great but I’d like to add the item rows in a table of the body. So between steps 5 and 6 I’d need to create a variable comprised of the headers and items to use in the email body as a table.

[pierce]

Hi @marcmccall

Email is looking good!

Thanks for the context.

Two different ways to solve this problem.

1. Use Postmark templates to move the HTML generation out of Pipedream and into Postmark, so you don’t have to worry about making HTML inside of a code step. But seeing that we’re missing the Send an email with a template action, I don’t think that’s going this is going to be an easy way unfortunately.

2. Add a Node.js code step that will generate an HTML table with that data, so then it’s easier to inject that table into your HTML body in the Postmark step:

// Generate a 2 column HTML table with a Node.js step
export default defineComponent({
  props: {
    rows: {
      type: 'string[]',
      label: "Rows",
      description: "Create an HTML table with the rows given (columns separated by commas)"
    }
  },
  async run({ steps, $ }) {
    const rows = this.rows.map(row => {
      const [one, two] = row.split(',').map(value => `<td>${value}</td>`);
      return `<tr>${one}${two}</tr>`;
    });

    return `
    <table>
      ${rows}
    </table>
    `
  },
})

Copy and paste this into a Node.js step and then click “Refresh Fields”.

Now you can enter in your rows separated by commas like so:

Then you can just inject this HTML table into your Postmark Email body content.

[marcmccall]

Once more thank you very much @pierce.

I’ll see if I can get somewhere with it. Seems to only be giving me row [0] in the table and getting a bunch of , at the top of the table. I’m not familiar with this language so it’s all new to me.

[pierce]

Hi @marcmccall

Under the hood, it’s just Javascript powering the inputs in the double brackets {{ }} in the props field inputs.

I think the extra commas are due to a formatting issue on your Node.js step. Could you share the exact inputs of the Node.js step that creates the HTML table?

The component I designed assumed you would only insert 2 columns per row maximum, there may be more than that provided.

[marcmccall]

Hi @pierce, sure thing. It does appear the number of commas is relevant to the number of fields added to make up the table. When only 2 fields are used I renders 1 comma.

When more fields are used it added additional commas.

It only seems to be picking up the first item in the array also and not looping through them all. This example I have 11 rows of data.

I’ve been reading through every article in the community on “looping” and or “iterating” and it’s not looking like there is a clear way to do it yet unless I’m reading this wrong. Loops in workflows · Issue #193 · PipedreamHQ/pipedream · GitHub Based on the last reply here it looks like it’s on the backlog for 2022. I know enough about coding to get in trouble. Thanks again for all of your help.

[pierce]

Thanks for all of the details @marcmccall looks like I had a slight bug in my code

Here’s an updated component to replace the last attempt with:

// To use previous step data, pass the `steps` object to the run() function
export default defineComponent({
  props: {
    rows: {
      type: 'string[]',
      label: "Rows",
      description: "Create an HTML table with the rows given (columns separated by commas)"
    }
  },
  async run({ steps, $ }) {
    const rows = this.rows.map(row => {
      const values = row.split(',').map(value => `<td>${value}</td>`);
      return `<tr>${values.join('')}</tr>`;
    });

    return `
    <table>
      ${rows.join('')}
    </table>
    `
  },
});

This one is different in that it allows as many columns in a row that you would like.

This will work for one order in your list, but you’re right it will need to be updated to support many orders.

I recommend reading about writing Node.js in code steps here or hiring this job out on our job board here.