Vue dynamic form with dynamic feedback - javascript

I have a case where I want to create a form in Vue based on an external JSON response dictating the form fields and feedback based on the choices made in the form.
This is a snippet of the JSON question-format I had in mind:
{
"questionId": 23,
"questionText": "Do you need help completing this questionnaire?",
"questionName": "need-help",
"answerType": "radio",
"answers": [
{
"id": 1,
"answerText": "Yes",
"answerFeedbackType": "error",
"answerFeedback": "At the moment we cannot complete the intake procedure. Please contact us by sending an e-mail and we'll help you towards your subscription."
},
{
"id": 2,
"answerText": "No"
}
]
},
At the moment I pass this data to a Question component where I have props for each key of the data object. This is loaded from my Form component where I load in the JSON and loop though all questions. How should I go about determining whether to show a notification when the user clicks on an option where there is a feedbacktype of 'error' and also detect whether the user has actually filled in every field?

Related

How to handle dispute event in webhook?

I'm a amateur php developer. I accepts stripe payments in my php website as one-time payments. I've integrated it correctly according to stripe website docs. (https://stripe.com/docs/payments/checkout/one-time#create-checkout-session). I'm getting checkout.session.created event from stripe webhook and I store it in my database as a completed payment. ( Advise me if I'm doing wrong ). This is the sample event data that stripe triggers as checkout.session.completed event.
{
"id": "evt_123",
"object": "event",
"api_version": "2019-03-14",
"created": 1561420781,
"data": {
"object": {
"id": "cs_test_123",
"object": "checkout.session",
"billing_address_collection": null,
"cancel_url": "https://example.com/cancel",
"client_reference_id": null,
"customer": "cus_123",
"customer_email": null,
"display_items": [],
"mode": "setup",
"setup_intent": "seti_1123",
"submit_type": null,
"subscription": null,
"success_url": "https://example.com/success"
}
},
"livemode": false,
"pending_webhooks": 1,
"request": {
"id": null,
"idempotency_key": null
},
"type": "checkout.session.completed"
}
But I need to handle webhook events for disputes. If a paid user opens dispute, I need to know it. How stripe notifies me it via webhook ? If stripe notifies me, How do I find parent payment ?. Sorry for my bad English.
webbhook is a url provided by you to stripe, on which stripe will be sending data, just like how you send data from a form to your site.
You should follow stripe docs for it, https://stripe.com/docs/payments/handling-payment-events and https://stripe.com/docs/webhooks
You should ideally edit your original post to include the 'answer' you added yesterday - and remove that answer - as Stackoverflow isn't the same as a forum
The Dispute object contains a Payment Intent ID and you can list / 'retrieve' the Checkout Session for that Payment Intent ID, so that's how you get it.

Adding and removing items from a cart in Dialogflow

I am prototyping a Food Ordering app using Dialogflow(Chatbot maker) and got stuck with this problem. Technically, I want to persist the gathered data from an Intent after the user decided to "add more items to their order" and satisfies all the required parameters, which are, (itemName, quantity, [variants], [sauceType], ...).
The chat bot should be able to handle a request which consist of multiple items with their corresponding quantities but I am not sure if it's possible to model a data wherein it consist an array of Entities so, my first thought was to use a persistent Fulfillment using session-based Webhook with our custom Web Service, like for example: foodorder/api/order/123/items/add and 123 being the Session Id. But this approach requires more work and the generated model can be difficult to translate in Dialoflow Console.
The second solution comes into my mind, is to leverage the Intent property called Action and Parameters where we mark the Entity as List, but using this approach, the quantity doesn't get attached to the item itself.
My question is, how can I be able to model a data using Dialogflow that resembles something like below:
{
"givenName": "Dummy User",
"order": [
{
"itemName": "Burger",
"quantity": 2
},
{
"itemName": "6 piece Chicken Nuggets",
"quantity": 1,
"sauceType": "Tangy Barbeque"
},
{
"itemName": "Coke",
"quantity": 1,
"size": "Small"
}
]
}
Turns out what I was looking for was Composite Entities and mark it as a list.
The detailed answer can be found on this link:
https://stackoverflow.com/a/47166123/2304737

How can I generate dialogs dynamically using the Microsoft Bot Builder SDK for Node.js?

I am building a tool that allows users to generate their own custom form surveys. I would like to give them the ability to convert these traditional form surveys into a chat conversation. I am already using the Microsoft Bot Builder SDK to interact with users through chat.
How can I generate dialogs dynamically using the form structure that is stored in my database? Assume that I have an array like this one stored in my database:
var form = [
{
inputType: 'text',
prompt: 'What is your first name?'
},
{
inputType: 'choice',
prompt: 'Select your gender',
values: ['female', 'male']
}
];
How can I generate a waterfall dialog using this array? I know I can just manually write the dialog code using prompts etc. if I know what the survey questions are all the time but I have to generate the dialog based on a dynamic form that users save. I can't find any information about how to achieve this. Appreciate the help. Thanks.
You can accomplish this using a community contributed tool called "Form Flow" - it is designed to accomplish a similar idea to yours.
You can find the NPM package here:
https://www.npmjs.com/package/botbuilder-formflow
More details available on the GitHub project repository here:
https://github.com/gudwin/botbuilder-formflow
Overview:
This Library will allow your bot to request complex forms from a user. It helps to build a waterfall dialog that will handle the whole form flow. The library will split into a list of dialogs required for each field. You can use predefined prompts or create you custom dialog wrappers around MBF prompts. Dialogs for each field evaluated separately and could be customized. The Library features:
Standard Prompts plus prompts for emails and urls;
Validators, Prompts, Error Prompts and Value extractors could be customized by a developer
Subdialogs are supported
Example: Simple registration form:
const builder = require('botbuilder');
const formFlow = require('../../botbuilder-formflow');
let signupForm = [
{
"type": "text",
"id": "login",
"prompt": "Please enter your login",
"response": "Your login is %s"
},
{
"type": "text",
"id": "password",
"prompt": "Please enter your password",
"response": "Your password is %s"
}
];
let connector = new builder.ConsoleConnector().listen();
let bot = new builder.UniversalBot(connector);
bot.dialog('/', [
session => session.beginDialog('/form'),
(session, response) => session.endDialog(`Form result: ${JSON.stringify(response.response)}`)
]);
formFlow.create(bot, '/form', signupForm);
console.log('To start registration flow press [[ENTER]]');
Alternatively, besides leveraging the npm package as #nilsw mentioned, you can try to build up an Adaptive Card json string by yourself from the entities in your database.
The field definition code snippet is simple:
{
"type": "TextBlock",
"text": "Your name",
"wrap": true
},
{
"type": "Input.Text",
"id": "myName",
"placeholder": "Last, First"
},
You can refer http://adaptivecards.io/samples/InputForm.html for the input form sample.
And also, refer to http://adaptivecards.io/explorer/Input.Choice.html for the fields definitions.

How to POST json to the Wufoo Entries API?

The current documentation is a little lacking on how exactly to submit forms via Ajax. There is The Entries POST API but it talks only about xml, and doesn't even show an example payload.
I see that Wufoo has a half-built, abandoned jQuery plugin wufoo/Wufoo-jQuery-API-Wrapper which seems to do little more than wrap $.get and format errors a bit. POST is listed as a "todo".
I've tried hitting the API with things like:
{
"Field1": "first",
"Field2": "last",
"Field3": "email#example.com",
"Field4": "test messsage",
}
And based on the line "This call would contain POST parameters in name/value pairs" and the example postAuthenticated(array('Field1' => 'Frank')); I tried just sending an array of arrays.
[
['Field1', 'first'],
['Field2', 'last'],
['Field3', 'email#example.com'],
['Field4', 'test messsage']
]
But since those are obviously the wrong format, I always get the following in response.
{
"Success": 0,
"ErrorText": "Errors have been <b>highlighted</b> below.",
"FieldErrors": [
{
"ID": "Field3",
"ErrorText": "This field is required. Please enter a value."
},
{
"ID": "Field4",
"ErrorText": "This field is required. Please enter a value."
}
]
}
Does anyone have any idea how to format these requests? Maybe someone with more experience with CurlService could interpret it from their example, but I can't make heads or tails of that documentation, nor find any examples online.
I should have known. The service doesn't accept json, it only replies in json. Submitting a regular urlencoded form body works.

How do I occupy a textbox with this JSON data

I am currently using JSON, AJAX, JQuery, and javascript. My JSON look like this
[{[{
"eventName":"Event Name",
"operationgDivision":"Operating Division",
"startDate":"05/14/2014",
"endDate":"05/19/2014",
"siteStartDate":"05/14/2014",
"siteEndDate":"05/19/2014",
"relatedEventName":"Related Event Name",
"relatedEventStartDate":"05/14/2014",
"relatedEventEndDate":"05/19/2014",
"objective":"Objective Info",
"targetAudience":"Target Audience",
"howToReachTargetAudience":"How to reach target audience",
"singleMessageToCommunicate":"Single message to communicate",
"challengesToConsider":"Challenge to consider",
"creativeConsideration":"Creative Consideration",
"creativeConsiderationAttachement":"",
"competitiveConsideration":"Competitive Consideration",
"competitiveConsiderationAttachement":"",
"pOSStartDate":"05/15/2014",
"pOSEndDate":"05/19/2014",
"ID":1
}]
I am currently trying to set the value of the my txtEventName textbox to the eventName data that is within the array in my callback.js file, but I'm having difficulty. Any help would be appreciated.

Categories

Resources