Skip to content

Commit

Permalink
Update to template editor with mapped variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericnewcomer
ericnewcomer committed May 1, 2024
1 parent 01fa8b0 commit 9f75d0f
Show file tree
Hide file tree
Showing 19 changed files with 7,729 additions and 562 deletions.
629 changes: 325 additions & 304 deletions public/static/temba-components/temba-components.js
View file

Large diffs are not rendered by default.

7,078 changes: 7,077 additions & 1 deletion public/static/temba-components/temba-components.js.map
View file

Large diffs are not rendered by default.

134 changes: 55 additions & 79 deletions src/components/flow/actions/localization/MsgLocalizationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import MultiChoiceInput from 'components/form/multichoice/MultiChoice';
import TextInputElement from 'components/form/textinput/TextInputElement';
import UploadButton from 'components/uploadbutton/UploadButton';
import { fakePropType } from 'config/ConfigProvider';
import { SendMsg, MsgTemplating } from 'flowTypes';
import { SendMsg } from 'flowTypes';
import * as React from 'react';
import mutate from 'immutability-helper';
import { FormState, mergeForm, StringArrayEntry, StringEntry } from 'store/nodeEditor';
Expand All @@ -27,8 +27,8 @@ export interface MsgLocalizationFormState extends FormState {
message: StringEntry;
quickReplies: StringArrayEntry;
audio: StringEntry;
params: any;
templating: MsgTemplating;
template?: { uuid: string; name: string };
templateVariables: string[];
attachments: Attachment[];
uploadInProgress: boolean;
uploadError: string;
Expand Down Expand Up @@ -93,7 +93,7 @@ export default class MsgLocalizationForm extends React.Component<
}

private handleSave(): void {
const { message: text, quickReplies, audio, attachments } = this.state;
const { message: text, quickReplies, audio, attachments, templateVariables } = this.state;

// make sure we are valid for saving, only quick replies can be invalid
const typeConfig = determineTypeConfig(this.props.nodeSettings);
Expand All @@ -120,39 +120,16 @@ export default class MsgLocalizationForm extends React.Component<
translations.audio_url = audio.value;
}

if (templateVariables) {
translations.template_variables = templateVariables;
}

const localizations = [
{
uuid: this.props.nodeSettings.originalAction!.uuid,
translations
}
];

// save our template components
const templating = (this.props.nodeSettings.originalAction as SendMsg).templating;
if (this.state.params && templating) {
const components = templating.components;

// find the matching component for our params
Object.keys(this.state.params).forEach((key: any) => {
const component = components.find((c: any) => c.name === key);
if (component) {
const params = this.state.params[key];

// if each string in params is empty string, set params to null
if (params.every((p: string) => p.trim() === '')) {
localizations.push({
uuid: component.uuid,
translations: null
});
} else {
localizations.push({
uuid: component.uuid,
translations: { params }
});
}
}
});
}
this.props.updateLocalizations(this.props.language.id, localizations);

// notify our modal we are done
Expand All @@ -175,7 +152,7 @@ export default class MsgLocalizationForm extends React.Component<
}

private handleTemplateVariableChanged(event: any): void {
this.setState({ params: event.detail.params });
this.setState({ templateVariables: event.detail.variables });

Check warning on line 155 in src/components/flow/actions/localization/MsgLocalizationForm.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/flow/actions/localization/MsgLocalizationForm.tsx#L155 

Added line #L155 was not covered by tests
}

private handleAttachmentUploading(isUploading: boolean) {
Expand Down Expand Up @@ -260,33 +237,27 @@ export default class MsgLocalizationForm extends React.Component<
const typeConfig = determineTypeConfig(this.props.nodeSettings);
const tabs: Tab[] = [];

if (this.state.templating) {
if (typeConfig.localizeableKeys!.indexOf('quick_replies') > -1) {
tabs.push({
name: 'WhatsApp',
name: i18n.t('forms.quick_replies', 'Quick Replies'),
body: (
<>
<p>
{i18n.t(
'forms.whatsapp_warning',
'Sending messages over a WhatsApp channel requires that a template be used if you have not received a message from a contact in the last 24 hours. Setting a template to use over WhatsApp is especially important for the first message in your flow.'
)}
</p>
{this.state.templating ? (
<TembaComponent
tag="temba-template-editor"
eventHandlers={{
'temba-content-changed': this.handleTemplateVariableChanged
}}
template={this.state.templating.template.uuid}
url={this.props.assetStore.templates.endpoint}
lang={this.props.language.id}
params={JSON.stringify(this.state.params)}
translating={true}
></TembaComponent>
) : null}
<MultiChoiceInput
name={i18n.t('forms.quick_reply', 'Quick Reply')}
helpText={
<Trans
i18nKey="forms.localized_quick_replies"
values={{ language: this.props.language.name }}
>
Add a new [[language]] Quick Reply and press enter.
</Trans>
}
items={this.state.quickReplies}
onChange={this.handleQuickReplyChanged}
/>
</>
),
checked: true //hasLocalizedValue
checked: this.state.quickReplies.value.length > 0
});
}

Expand All @@ -308,30 +279,6 @@ export default class MsgLocalizationForm extends React.Component<
});
}

if (typeConfig.localizeableKeys!.indexOf('quick_replies') > -1) {
tabs.push({
name: i18n.t('forms.quick_replies', 'Quick Replies'),
body: (
<>
<MultiChoiceInput
name={i18n.t('forms.quick_reply', 'Quick Reply')}
helpText={
<Trans
i18nKey="forms.localized_quick_replies"
values={{ language: this.props.language.name }}
>
Add a new [[language]] Quick Reply and press enter.
</Trans>
}
items={this.state.quickReplies}
onChange={this.handleQuickReplyChanged}
/>
</>
),
checked: this.state.quickReplies.value.length > 0
});
}

let audioButton: JSX.Element | null = null;
if (typeConfig.localizeableKeys!.indexOf('audio_url') > 0) {
audioButton = (
Expand All @@ -346,8 +293,37 @@ export default class MsgLocalizationForm extends React.Component<
);
}

const translation = i18n.t('forms.translation', 'Translation');
if (this.state.template) {
tabs.push({

Check warning on line 297 in src/components/flow/actions/localization/MsgLocalizationForm.tsx

View check run for this annotation

Codecov / codecov/patch

src/components/flow/actions/localization/MsgLocalizationForm.tsx#L297 

Added line #L297 was not covered by tests
name: 'WhatsApp',
body: (
<>
<p>
{i18n.t(
'forms.whatsapp_warning',
'Sending messages over a WhatsApp channel requires that a template be used if you have not received a message from a contact in the last 24 hours. Setting a template to use over WhatsApp is especially important for the first message in your flow.'
)}
</p>
{this.state.template ? (
<TembaComponent
tag="temba-template-editor"
eventHandlers={{
'temba-content-changed': this.handleTemplateVariableChanged
}}
template={this.state.template.uuid}
url={this.props.assetStore.templates.endpoint}
lang={this.props.language.id}
variables={JSON.stringify(this.state.templateVariables)}
translating={true}
></TembaComponent>
) : null}
</>
),
checked: this.state.templateVariables.length > 0
});
}

const translation = i18n.t('forms.translation', 'Translation');
return (
<Dialog
title={typeConfig.name}
Expand Down
118 changes: 60 additions & 58 deletions src/components/flow/actions/localization/__snapshots__/MsgLocalizationForm.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,33 @@ exports[`MsgLocalizationForm inits inits with initial values 1`] = `
headerClass="send_msg"
tabs={
Array [
Object {
"body": <React.Fragment>
<MultiChoiceInput
helpText={
<Trans
i18nKey="forms.localized_quick_replies"
values={
Object {
"language": "Spanish",
}
}
>
Add a new [[language]] Quick Reply and press enter.
</Trans>
}
items={
Object {
"value": Array [],
}
}
name="Quick Reply"
onChange={[Function]}
/>
</React.Fragment>,
"checked": false,
"name": "Quick Replies",
},
Object {
"body": <React.Fragment>
<p>
Expand Down Expand Up @@ -78,33 +105,6 @@ exports[`MsgLocalizationForm inits inits with initial values 1`] = `
"checked": false,
"name": "Attachments",
},
Object {
"body": <React.Fragment>
<MultiChoiceInput
helpText={
<Trans
i18nKey="forms.localized_quick_replies"
values={
Object {
"language": "Spanish",
}
}
>
Add a new [[language]] Quick Reply and press enter.
</Trans>
}
items={
Object {
"value": Array [],
}
}
name="Quick Reply"
onChange={[Function]}
/>
</React.Fragment>,
"checked": false,
"name": "Quick Replies",
},
]
}
title="Send Message"
Expand Down Expand Up @@ -153,6 +153,33 @@ exports[`MsgLocalizationForm render should render 1`] = `
headerClass="send_msg"
tabs={
Array [
Object {
"body": <React.Fragment>
<MultiChoiceInput
helpText={
<Trans
i18nKey="forms.localized_quick_replies"
values={
Object {
"language": "Spanish",
}
}
>
Add a new [[language]] Quick Reply and press enter.
</Trans>
}
items={
Object {
"value": Array [],
}
}
name="Quick Reply"
onChange={[Function]}
/>
</React.Fragment>,
"checked": false,
"name": "Quick Replies",
},
Object {
"body": <React.Fragment>
<p>
Expand Down Expand Up @@ -214,33 +241,6 @@ exports[`MsgLocalizationForm render should render 1`] = `
"checked": false,
"name": "Attachments",
},
Object {
"body": <React.Fragment>
<MultiChoiceInput
helpText={
<Trans
i18nKey="forms.localized_quick_replies"
values={
Object {
"language": "Spanish",
}
}
>
Add a new [[language]] Quick Reply and press enter.
</Trans>
}
items={
Object {
"value": Array [],
}
}
name="Quick Reply"
onChange={[Function]}
/>
</React.Fragment>,
"checked": false,
"name": "Quick Replies",
},
]
}
title="Send Message"
Expand Down Expand Up @@ -281,12 +281,12 @@ Object {
"message": Object {
"value": "",
},
"params": Object {},
"quickReplies": Object {
"validationFailures": Array [],
"value": Array [],
},
"templating": null,
"template": null,
"templateVariables": Array [],
"uploadError": "",
"uploadInProgress": false,
"valid": true,
Expand All @@ -300,6 +300,7 @@ Array [
Object {
"translations": Object {
"attachments": Array [],
"template_variables": Array [],
},
"uuid": "b1f332f3-bdd3-4891-aec5-1843a712dbf1",
},
Expand All @@ -317,7 +318,6 @@ Object {
"validationFailures": Array [],
"value": "What is your favorite color?",
},
"params": Object {},
"quickReplies": Object {
"validationFailures": Array [],
"value": Array [
Expand All @@ -326,7 +326,8 @@ Object {
"blue",
],
},
"templating": null,
"template": null,
"templateVariables": Array [],
"uploadError": "",
"uploadInProgress": false,
"valid": true,
Expand All @@ -345,6 +346,7 @@ Array [
"green",
"blue",
],
"template_variables": Array [],
"text": "What is your favorite color?",
},
"uuid": "b1f332f3-bdd3-4891-aec5-1843a712dbf1",
Expand Down
Loading

0 comments on commit 9f75d0f

Please sign in to comment.