Skip to content

Commit 6ec2c52

Browse files
priyanshu6238priyanshu6238
committed
testing
1 parent 6a8afc9 commit 6ec2c52

File tree

2 files changed

+91
-62
lines changed

2 files changed

+91
-62
lines changed

‎src/components/flow/routers/webhook/WebhookRouterForm.tsx‎

Lines changed: 89 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export interface WebhookRouterFormState extends FormState {
5353
webhookFunction: FormEntry;
5454
webhookOptions: any[];
5555
isLoading: boolean;
56+
openAssistantPreview: boolean;
5657
}
5758
export default class WebhookRouterForm extends React.Component<
5859
RouterFormProps,
@@ -404,70 +405,97 @@ export default class WebhookRouterForm extends React.Component<
404405
tabs.reverse();
405406

406407
return (
407-
<Dialog
408-
title={typeConfig.name}
409-
headerClass={typeConfig.type}
410-
buttons={this.getButtons()}
411-
tabs={tabs}
412-
>
413-
<TypeList __className="" initialType={typeConfig} onChange={this.props.onTypeChange} />
414-
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
415-
<div className={styles.method}>
416-
<SelectElement
417-
key="method_select"
418-
name={i18n.t('forms.method', 'Method')}
419-
entry={this.state.method}
420-
onChange={this.handleMethodUpdate}
421-
options={METHOD_OPTIONS}
422-
/>
423-
</div>
424-
<div className={styles.url}>
425-
{method === 'FUNCTION' ? (
426-
<TembaSelectElement
427-
key="webhook_function_select"
428-
name={i18n.t('forms.function', 'Function')}
429-
placeholder={
430-
this.state.isLoading
431-
? 'Loading functions…'
432-
: i18n.t('forms.select_or_type', 'Type to search or select')
433-
}
434-
entry={this.state.webhookFunction}
435-
searchable={true}
436-
multi={false}
437-
expressions={false}
438-
onChange={this.handleWebhookFunctionChanged}
439-
options={this.state.webhookOptions}
408+
<>
409+
{/* Assistant Preview Dialog */}
410+
{this.state.openAssistantPreview && (
411+
<Dialog
412+
title="Assistant Preview"
413+
buttons={{
414+
primary: {
415+
name: 'Close',
416+
onClick: () => this.setState({ openAssistantPreview: false })
417+
}
418+
}}
419+
>
420+
<div style={{ width: '100%', height: '600px' }}>
421+
<iframe
422+
src="https://glific.test:3000/assistants"
423+
style={{
424+
width: '100%',
425+
height: '100%',
426+
border: 'none',
427+
borderRadius: '6px'
428+
}}
440429
/>
441-
) : (
442-
<TextInputElement
443-
name={i18n.t('forms.url', 'URL')}
444-
placeholder={i18n.t('forms.enter_a_url', 'Enter a URL')}
445-
entry={this.state.url}
446-
onChange={this.handleUrlUpdate}
447-
autocomplete={true}
430+
</div>
431+
</Dialog>
432+
)}
433+
<Dialog
434+
title={typeConfig.name}
435+
headerClass={typeConfig.type}
436+
buttons={this.getButtons()}
437+
tabs={tabs}
438+
>
439+
<TypeList __className="" initialType={typeConfig} onChange={this.props.onTypeChange} />
440+
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
441+
<div className={styles.method}>
442+
<SelectElement
443+
key="method_select"
444+
name={i18n.t('forms.method', 'Method')}
445+
entry={this.state.method}
446+
onChange={this.handleMethodUpdate}
447+
options={METHOD_OPTIONS}
448448
/>
449-
)}
449+
</div>
450+
<div className={styles.url}>
451+
{method === 'FUNCTION' ? (
452+
<TembaSelectElement
453+
key="webhook_function_select"
454+
name={i18n.t('forms.function', 'Function')}
455+
placeholder={
456+
this.state.isLoading
457+
? 'Loading functions…'
458+
: i18n.t('forms.select_or_type', 'Type to search or select')
459+
}
460+
entry={this.state.webhookFunction}
461+
searchable={true}
462+
multi={false}
463+
expressions={false}
464+
onChange={this.handleWebhookFunctionChanged}
465+
options={this.state.webhookOptions}
466+
/>
467+
) : (
468+
<TextInputElement
469+
name={i18n.t('forms.url', 'URL')}
470+
placeholder={i18n.t('forms.enter_a_url', 'Enter a URL')}
471+
entry={this.state.url}
472+
onChange={this.handleUrlUpdate}
473+
autocomplete={true}
474+
/>
475+
)}
476+
</div>
450477
</div>
451-
</div>
452-
<div className={styles.instructions}>
453-
<p>
454-
<Trans i18nKey="forms.webhook_help">
455-
If your server responds with JSON, each property will be added to the Flow.
456-
</Trans>
457-
</p>
458-
<pre className={styles.code}>
459-
{'{ "product": "Solar Charging Kit", "stock level": 32 }'}
460-
</pre>
461-
<p>
462-
<Trans i18nKey="forms.webhook_example">
463-
This response would add <span className={styles.example}>@webhook.product</span> and{' '}
464-
<span className={styles.example}>@(webhook["stock level"])</span> for use in the flow.
465-
</Trans>
466-
</p>
467-
</div>
468-
{createResultNameInput(this.state.resultName, this.handleUpdateResultName)}
469-
{renderIssues(this.props)}
470-
</Dialog>
478+
<div className={styles.instructions}>
479+
<p>
480+
<Trans i18nKey="forms.webhook_help">
481+
If your server responds with JSON, each property will be added to the Flow.
482+
</Trans>
483+
</p>
484+
<pre className={styles.code}>
485+
{'{ "product": "Solar Charging Kit", "stock level": 32 }'}
486+
</pre>
487+
<p>
488+
<Trans i18nKey="forms.webhook_example">
489+
This response would add <span className={styles.example}>@webhook.product</span> and{' '}
490+
<span className={styles.example}>@(webhook["stock level"])</span> for use in the
491+
flow.
492+
</Trans>
493+
</p>
494+
</div>
495+
{createResultNameInput(this.state.resultName, this.handleUpdateResultName)}
496+
{renderIssues(this.props)}
497+
</Dialog>
498+
</>
471499
);
472500
}
473501

‎src/components/flow/routers/webhook/helpers.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export const nodeToState = (settings: NodeEditorSettings): WebhookRouterFormStat
6565
webhookFunction: { value: null },
6666
webhookOptions: [],
6767
valid: false,
68-
isLoading: false
68+
isLoading: false,
69+
openAssistantPreview: true
6970
};
7071

7172
const action = getOriginalAction(settings) as CallWebhook;

0 commit comments

Comments
 (0)