diff --git a/src/components/UI/Form/AddAutoComplete/AddAutoComplete.test.tsx b/src/components/UI/Form/CreateAutoComplete/CreateAutoComplete.test.tsx
similarity index 84%
rename from src/components/UI/Form/AddAutoComplete/AddAutoComplete.test.tsx
rename to src/components/UI/Form/CreateAutoComplete/CreateAutoComplete.test.tsx
index 036ddea03..74cbdef98 100644
--- a/src/components/UI/Form/AddAutoComplete/AddAutoComplete.test.tsx
+++ b/src/components/UI/Form/CreateAutoComplete/CreateAutoComplete.test.tsx
@@ -1,8 +1,8 @@
import { MockedProvider } from '@apollo/client/testing';
import { render, waitFor } from '@testing-library/react';
-import { AddAutoComplete } from './AddAutoComplete';
+import { CreateAutoComplete } from './CreateAutoComplete';
import { CREATE_LABEL } from 'graphql/mutations/Tags';
-describe('', () => {
+describe('', () => {
const mocks = [
{
request: {
@@ -39,10 +39,10 @@ describe('', () => {
form: { dirty: false, touched: false, errors: false, setFieldValue: mockHandleChange },
};
- it('renders component', () => {
+ it('renders component', () => {
const container = render(
-
+
);
waitFor(() => {
diff --git a/src/components/UI/Form/AddAutoComplete/AddAutoComplete.tsx b/src/components/UI/Form/CreateAutoComplete/CreateAutoComplete.tsx
similarity index 78%
rename from src/components/UI/Form/AddAutoComplete/AddAutoComplete.tsx
rename to src/components/UI/Form/CreateAutoComplete/CreateAutoComplete.tsx
index 37299696b..02e2d24d4 100644
--- a/src/components/UI/Form/AddAutoComplete/AddAutoComplete.tsx
+++ b/src/components/UI/Form/CreateAutoComplete/CreateAutoComplete.tsx
@@ -2,8 +2,9 @@ import { useMutation } from '@apollo/client';
import { AutoComplete, AutocompleteProps } from '../AutoComplete/AutoComplete';
import { CREATE_LABEL } from 'graphql/mutations/Tags';
-export interface AddAutoCompleteProp extends AutocompleteProps {}
-export const AddAutoComplete = ({ ...rest }: AddAutoCompleteProp) => {
+export interface CreateAutoCompleteProp extends AutocompleteProps {}
+
+export const CreateAutoComplete = ({ ...rest }: CreateAutoCompleteProp) => {
const [createTag] = useMutation(CREATE_LABEL);
const handleCreateItem = async (value: string) => {
diff --git a/src/containers/Flow/Flow.tsx b/src/containers/Flow/Flow.tsx
index 7945a4fba..f64dd3231 100644
--- a/src/containers/Flow/Flow.tsx
+++ b/src/containers/Flow/Flow.tsx
@@ -151,7 +151,7 @@ export const Flow = () => {
multiple: false,
textFieldProps: {
variant: 'outlined',
- label: t('Label'),
+ label: t('Tag'),
},
},
{
diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
index 2c2bf7ea1..8b0e4605e 100644
--- a/src/containers/Flow/FlowList/FlowList.tsx
+++ b/src/containers/Flow/FlowList/FlowList.tsx
@@ -233,7 +233,7 @@ export const FlowList = () => {
const tagFilter = (
@@ -535,22 +535,6 @@ export const InteractiveMessage = () => {
},
onGlobalButtonInputChange: (value: string) => setGlobalButton(value),
},
- {
- component: AddAutoComplete,
- name: 'tagId',
- options: tag ? tag.tags : [],
- optionLabel: 'label',
- disabled: false,
- hasCreateOption: true,
- multiple: false,
- onChange: (value: any) => {
- setTagId(value);
- },
- textFieldProps: {
- variant: 'outlined',
- label: t('Label'),
- },
- },
];
const getTemplateButtonPayload = (typeVal: string, buttons: Array) => {
@@ -718,7 +702,26 @@ export const InteractiveMessage = () => {
},
];
- const formFields = templateType === LIST ? [...fields] : [...fields, ...attachmentInputs];
+ let formFields: any = templateType === LIST ? [...fields] : [...fields, ...attachmentInputs];
+ formFields = [
+ ...formFields,
+ {
+ component: CreateAutoComplete,
+ name: 'tagId',
+ options: tag ? tag.tags : [],
+ optionLabel: 'label',
+ disabled: false,
+ hasCreateOption: true,
+ multiple: false,
+ onChange: (value: any) => {
+ setTagId(value);
+ },
+ textFieldProps: {
+ variant: 'outlined',
+ label: t('Tag'),
+ },
+ },
+ ];
const validation = validator(templateType, t);
const validationScheme = Yup.object().shape(validation, [['type', 'attachmentURL']]);
diff --git a/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx b/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx
index 6cc5c8869..4425e8a2d 100644
--- a/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx
+++ b/src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.tsx
@@ -138,7 +138,7 @@ export const InteractiveMessageList = () => {
const tagFilter = (
{
media: {},
body: '',
});
+
const [shortcode, setShortcode] = useState('');
const [example, setExample] = useState(EditorState.createEmpty());
const [category, setCategory] = useState({ label: '', id: '' });
diff --git a/src/containers/Template/Form/Template.tsx b/src/containers/Template/Form/Template.tsx
index 35463e688..127c17fd9 100644
--- a/src/containers/Template/Form/Template.tsx
+++ b/src/containers/Template/Form/Template.tsx
@@ -16,10 +16,12 @@ import { LanguageBar } from 'components/UI/LanguageBar/LanguageBar';
import { GET_TEMPLATE, FILTER_TEMPLATES } from 'graphql/queries/Template';
import { CREATE_MEDIA_MESSAGE } from 'graphql/mutations/Chat';
import { USER_LANGUAGES } from 'graphql/queries/Organization';
+import { GET_TAGS } from 'graphql/queries/Tags';
import { CREATE_TEMPLATE, UPDATE_TEMPLATE, DELETE_TEMPLATE } from 'graphql/mutations/Template';
import { MEDIA_MESSAGE_TYPES, CALL_TO_ACTION, QUICK_REPLY } from 'common/constants';
import { getPlainTextFromEditor, getEditorFromContent } from 'common/RichEditor';
import Loading from 'components/UI/Layout/Loading/Loading';
+import { CreateAutoComplete } from 'components/UI/Form/CreateAutoComplete/CreateAutoComplete';
import { validateMedia } from 'common/utils';
import styles from './Template.module.css';
@@ -171,6 +173,7 @@ const Template = ({
? options.filter(({ label }) => label !== 'AUDIO' && label !== 'STICKER')
: options;
+ const [tagId, setTagId] = useState(null);
const [label, setLabel] = useState('');
const [body, setBody] = useState(EditorState.createEmpty());
const [example, setExample] = useState(EditorState.createEmpty());
@@ -196,6 +199,11 @@ const Template = ({
const location: any = useLocation();
const params = useParams();
+ const { data: tag } = useQuery(GET_TAGS, {
+ variables: {},
+ fetchPolicy: 'network-only',
+ });
+
const states = {
language,
label,
@@ -205,6 +213,7 @@ const Template = ({
shortcode,
example,
category,
+ tagId,
isActive,
templateButtons,
isAddButtonChecked,
@@ -221,6 +230,7 @@ const Template = ({
MessageMedia: MessageMediaValue,
shortcode: shortcodeValue,
category: categoryValue,
+ tag: tagIdValue,
buttonType: templateButtonType,
buttons,
hasButtons,
@@ -302,6 +312,9 @@ const Template = ({
if (categoryValue) {
setCategory({ label: categoryValue, id: categoryValue });
}
+ if (tagIdValue) {
+ setTagId(tagIdValue);
+ }
};
const updateStates = ({
@@ -731,6 +744,23 @@ const Template = ({
},
];
+ const tags = {
+ component: CreateAutoComplete,
+ name: 'tagId',
+ options: tag ? tag.tags : [],
+ optionLabel: 'label',
+ disabled: false,
+ hasCreateOption: true,
+ multiple: false,
+ onChange: (value: any) => {
+ setTagId(value);
+ },
+ textFieldProps: {
+ variant: 'outlined',
+ label: t('Tag'),
+ },
+ };
+
const hsmFields = formField && [
...formField.slice(0, 1),
...templateRadioOptions,
@@ -738,7 +768,7 @@ const Template = ({
];
const fields = defaultAttribute.isHsm
- ? [formIsActive, ...formFields, ...hsmFields, ...attachmentField]
+ ? [formIsActive, ...formFields, ...hsmFields, ...attachmentField, tags]
: [...formFields, ...attachmentField];
// Creating payload for button template
@@ -849,7 +879,7 @@ const Template = ({
}
if (payloadCopy.isHsm) {
payloadCopy.category = payloadCopy.category.label;
-
+ payloadCopy.tagId = payload.tagId.id;
if (isAddButtonChecked && templateType) {
const templateButtonData = getButtonTemplatePayload();
Object.assign(payloadCopy, { ...templateButtonData });
diff --git a/src/containers/Template/List/SpeedSendList/SpeedSendList.test.tsx b/src/containers/Template/List/SpeedSendList/SpeedSendList.test.tsx
index 02c90d994..15c2fd2e6 100644
--- a/src/containers/Template/List/SpeedSendList/SpeedSendList.test.tsx
+++ b/src/containers/Template/List/SpeedSendList/SpeedSendList.test.tsx
@@ -7,7 +7,7 @@ import { setUserSession } from 'services/AuthService';
import { SpeedSendList } from './SpeedSendList';
afterEach(cleanup);
-const mocks = TEMPLATE_MOCKS;
+const mocks = [...TEMPLATE_MOCKS, ...TEMPLATE_MOCKS];
const speedSend = (
diff --git a/src/containers/Template/List/Template.test.tsx b/src/containers/Template/List/Template.test.tsx
index 3464c2cd3..f58e25be7 100644
--- a/src/containers/Template/List/Template.test.tsx
+++ b/src/containers/Template/List/Template.test.tsx
@@ -76,7 +76,7 @@ const hsmProps: any = {
};
describe('HSM templates', () => {
- const hsmMocks = [...HSM_LIST, bulkApplyMutation];
+ const hsmMocks = [...HSM_LIST, ...HSM_LIST, bulkApplyMutation];
const hsmComponent = (
@@ -142,6 +142,7 @@ describe('HSM templates', () => {
describe('Provider: Gupshup enterprise', () => {
const hsmMocks = [
+ ...HSM_LIST,
...HSM_LIST,
getOrganizationBSP,
importTemplateMutation,
diff --git a/src/containers/Template/List/Template.tsx b/src/containers/Template/List/Template.tsx
index 7e12b27ce..79c44c963 100644
--- a/src/containers/Template/List/Template.tsx
+++ b/src/containers/Template/List/Template.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { Checkbox, FormControlLabel } from '@mui/material';
import { List } from 'containers/List/List';
-import { useMutation } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
import { WhatsAppToJsx } from 'common/RichEditor';
import { DATE_TIME_FORMAT, GUPSHUP_ENTERPRISE_SHORTCODE } from 'common/constants';
import {
@@ -29,6 +29,8 @@ import { setNotification } from 'common/notification';
import { BULK_APPLY_SAMPLE_LINK } from 'config';
import styles from './Template.module.css';
import { CopyAllOutlined } from '@mui/icons-material';
+import { GET_TAGS } from 'graphql/queries/Tags';
+import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
const getLabel = (label: string) => {label}
;
@@ -80,11 +82,16 @@ export const Template = ({
const { t } = useTranslation();
const { provider } = useContext(ProviderContext);
-
+ const [selectedTag, setSelectedTag] = useState(null);
const [importing, setImporting] = useState(false);
const [filters, setFilters] = useState({ ...statusFilter, APPROVED: true });
+ const { data: tag } = useQuery(GET_TAGS, {
+ variables: {},
+ fetchPolicy: 'network-only',
+ });
+
const [importTemplatesMutation] = useMutation(IMPORT_TEMPLATES, {
onCompleted: (data: any) => {
setImporting(false);
@@ -344,6 +351,36 @@ export const Template = ({
button.show = false;
}
+ // OnChange handler for the dropdown
+ const handleDropdownChange = (event: any) => {
+ setSelectedTag(event.target.value);
+ };
+
+ const tagFilter = (
+ {
+ setSelectedTag(value);
+ }}
+ form={{ setFieldValue: handleDropdownChange }}
+ field={{
+ value: selectedTag,
+ onChange: handleDropdownChange,
+ }}
+ />
+ );
+
+ appliedFilters = {
+ ...appliedFilters,
+ ...(selectedTag?.id && { tagIds: [parseInt(selectedTag?.id)] }),
+ };
+
return (
);
};
diff --git a/src/containers/Template/Template.test.helper.ts b/src/containers/Template/Template.test.helper.ts
index f639f8ea1..27cfbf227 100644
--- a/src/containers/Template/Template.test.helper.ts
+++ b/src/containers/Template/Template.test.helper.ts
@@ -14,6 +14,7 @@ import {
} from 'mocks/Organization';
import { templateCountQuery } from 'mocks/Template';
import { CREATE_MEDIA_MESSAGE } from 'graphql/mutations/Chat';
+import { GET_TAGS } from 'graphql/queries/Tags';
const count = templateCountQuery(false, 2);
@@ -268,6 +269,28 @@ const getTemplateData = {
};
export const TEMPLATE_MOCKS = [
+ {
+ request: {
+ query: GET_TAGS,
+ variables: {},
+ },
+ result: {
+ data: {
+ tags: [
+ {
+ __typename: 'Tag',
+ id: '1',
+ label: 'Messages',
+ },
+ {
+ __typename: 'Tag',
+ id: '2',
+ label: 'Contacts',
+ },
+ ],
+ },
+ },
+ },
{
request: {
query: CREATE_TEMPLATE,
diff --git a/src/graphql/queries/Template.ts b/src/graphql/queries/Template.ts
index 14d35286f..96754ab2e 100644
--- a/src/graphql/queries/Template.ts
+++ b/src/graphql/queries/Template.ts
@@ -60,6 +60,10 @@ export const GET_TEMPLATE = gql`
caption
sourceUrl
}
+ tag {
+ id
+ label
+ }
category
shortcode
example
diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json
index 48dd773fc..129811ca3 100644
--- a/src/i18n/en/en.json
+++ b/src/i18n/en/en.json
@@ -414,10 +414,11 @@
"Opened by": "Opened by",
"Change assignee": "Change assignee",
"Select Tag": "Select Tag",
- "Select Label": "Select Label",
+ "Select tag": "Select tag",
"View profile": "View profile",
"Copy UUID": "Copy UUID",
"Org Id": "Org Id",
+ "Tag": "Tag",
"Export collection": "Export collection",
"Sheet type": "Sheet type"
}