node-red-contrib-chatbot/nodes/chatbot-invoice-shipping.html

REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required

<script type="text/javascript">
  $.RedBot.registerType('chatbot-invoice-shipping', {
    category: $.RedBot.config.name,
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      shippingOptions: {
        value: []
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'Invoice Shipping',
    icon: 'chatbot-invoice-shipping.png',
    label: function() {
      return this.name || 'Invoice Shipping';
    },
    oneditsave: function() {
      var shippingOptions = $("#node-input-items-container").editableList('items');
      var node = this;
      node.shippingOptions = [];
      var idx;
      for(idx = 0; idx < shippingOptions.length; idx++) {
        var container = $(shippingOptions[idx]);
        node.shippingOptions.push({
          id: $('input[name=id]', container).val(),
          label: $('input[name=label]', container).val(),
          amount: $('input[name=amount]', container).val()
        });
      }
    },
    oneditprepare: function() {
      $('#node-input-items-container')
        .css('min-height','300px')
        .css('min-width','450px')
        .editableList({
          addButton: 'Add shipping option',
          addItem: function(container, i, item) {
            var row = $('<div/>').appendTo(container);
            row
              .append('<input style="width:15%;margin-left:10px;" type="text" name="id" placeholder="Unique Id"/>')
              .append('<input style="width:50%;margin-left:10px;" type="text" name="label" placeholder="Label"/>')
              .append('<input style="width:25%;margin-left:10px;" type="text" name="amount" placeholder="Amount"/>');

            if (item.label != null) {
              $('input[name=label]', container).val(item.label);
            }
            if (item.amount != null) {
              $('input[name=amount]', container).val(item.amount);
            }
            if (item.id != null) {
              $('input[name=id]', container).val(item.id);
            }
          },
          removable: true,
          sortable: true
        });

      var shippingOptions = this.shippingOptions;
      var idx;
      for (idx = 0; idx < shippingOptions.length; idx++) {
        $('#node-input-items-container').editableList('addItem', shippingOptions[idx]);
      }
    }
  });
</script>

<script type="text/x-red" data-template-name="chatbot-invoice-shipping">
<div class="form-row form-row-name">
  <label for="node-input-name"><i class="icon-tag"></i> Name</label>
  <input type="text" id="node-input-name" placeholder="Name">
</div>

<div class="form-row form-row-label" style="margin-bottom:0;">
  <label style="width:auto;"><span>Shipping Methods</span></label>
</div>
<div class="form-row node-input-rule-container-row">
  <ol id="node-input-items-container"></ol>
</div>
</script>

<script type="text/x-red" data-help-name="chatbot-invoice-shipping"><p>The <code>Invoice Shipping node</code> is required when an invoice is sent to the Telegram client with the flag <em>isFlexible</em>: that means that the shipping options need to be calculates based on the destination and/or the goods that are to be delivered.</p>
<p>When this happens a message type <em>invoice-shipping</em> is received from the chatbot, at this point is mandatory to answer with a <code>Invoice Shipping node</code> with the proposed shipping options and related prices. The total amount charged to the user’s credit card will depend on the selected shipping option.</p>
<p>Use a <a href="https://www.notion.so/4113636f565d4ff4af08bc61a644206b">Rules node</a>  to redirect the incoming messages with type <em>invoice-shipping</em> to the subflow that handles the aswer. It’s also a common use case to calculate dinamically the shipping options in a <code>Function node</code></p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/52465df7-4094-4095-8934-f09ea2ac18f5/example-shipping-options.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124934Z&X-Amz-Expires=3600&X-Amz-Signature=768ea568e569a9986d5cfd9c0f482be102aef3c3ee6b5d3391984d51c479b1cc&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Shipping Options"></p>
<p>And in the upstream <code>Function node</code></p>
<pre><code class="language-javascript">msg.payload.shippingOptions = [
  { id: &#39;FEDEX&#39;, label: &#39;FedEx&#39;, amount: 9.99 },
  { id: &#39;DHL&#39;, label: &#39;DHL&#39;, amount: 11.99 },
];
return msg;
</code></pre>
<p>Available paramenters for payload in the upstream node</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>shippingOptions</td>
<td>array of [shippingOption]</td>
<td>The shipping options available for the payment</td>
</tr>
</tbody></table>
<p>The shipping option</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>id</td>
<td>string</td>
<td>A unique identifier for the shipping option</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>The name of the shipping option</td>
</tr>
<tr>
<td>amount</td>
<td>number</td>
<td>The additional price for the shipping</td>
</tr>
</tbody></table>
</script>