@@ -249,7 +292,7 @@ export const TemplateOptions = ({
title={title}
placeholder={`Quick reply ${index + 1} title`}
variant="outlined"
- onChange={(e: any) => onInputChange(e, row, index, 'value')}
+ onChange={(e: any) => onInputChange(e.target.value, row, index, 'value')}
className={styles.TextField}
error={isError('value')}
slotProps={{
@@ -274,58 +317,111 @@ export const TemplateOptions = ({
);
}
+
+ if (templateType?.id === WHATSAPP_FORM) {
+ template = (
+
+ );
+ }
return template;
};
- const radioTemplateType = (
-
-
onTemplateTypeChange(event.target.value)}
- >
-
- }
- label="Call to actions"
- classes={{ root: styles.RadioLabel }}
- />
-
-
-
-
-
- }
- label="Quick replies"
- className={styles.RadioLabel}
- />
-
-
-
-
-
+ return (
+ <>
+ {isAddButtonChecked && (
+
+
+
}
+ value={templateType}
+ onChange={(event: any, newValue: any) => {
+ onTemplateTypeChange(newValue);
+ }}
+ fullWidth
+ disabled={disabled}
+ disableClearable
+ />
- {templateType ? (
-
-
(
-
- {inputFields.map((row: any, index: any) => (
-
{getButtons(row, index, arrayHelpers)}
- ))}
-
+
(
+
+ {inputFields.map((row: any, index: any) => (
+
{getButtons(row, index, arrayHelpers)}
+ ))}
+
- ) : null}
-
+ )}
+
);
-
- return
{isAddButtonChecked && radioTemplateType}
;
};
diff --git a/src/containers/WhatsAppForms/WhatsAppForm.module.css b/src/containers/WhatsAppForms/WhatsAppForm.module.css
new file mode 100644
index 0000000000..c4335f42df
--- /dev/null
+++ b/src/containers/WhatsAppForms/WhatsAppForm.module.css
@@ -0,0 +1,75 @@
+.FlowBuilderInfo {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1.5rem;
+ margin: 2rem;
+ margin-bottom: 0;
+ background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
+ border: 1px solid #bbf7d0;
+ border-radius: 12px;
+ box-shadow: 0 1px 3px 0 #22c55e1a;
+ transition: all 0.2s ease-in-out;
+}
+
+.FlowBuilderInfo:hover {
+ box-shadow: 0 4px 6px -1px #22c55e26;
+ transform: translateY(-1px);
+}
+
+.FlowBuilderInfo p {
+ margin-bottom: 0;
+}
+
+.InfoContent {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ flex: 1;
+}
+
+.IconWrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 3rem;
+ height: 3rem;
+ background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+ border-radius: 12px;
+ flex-shrink: 0;
+}
+
+.Icon {
+ color: white !important;
+ font-size: 24px !important;
+}
+
+.Title {
+ margin: 0 0 8px;
+ font-size: 1.125rem;
+ font-weight: 600;
+ color: #14532d;
+ line-height: 1.4;
+}
+
+.Description {
+ margin: 0;
+ font-size: 0.875rem;
+ color: #16a34a;
+ line-height: 1.5;
+}
+
+.FlowBuilderButton {
+ padding: 0.75rem 1.5rem !important;
+ font-weight: 500 !important;
+ border-radius: 8px !important;
+ white-space: nowrap;
+ min-width: 160px;
+ transition: all 0.2s ease-in-out !important;
+ color: #fff !important;
+}
+
+.FlowBuilderButton:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px #22c55e4d !important;
+}
diff --git a/src/containers/WhatsAppForms/WhatsAppForm.test.tsx b/src/containers/WhatsAppForms/WhatsAppForm.test.tsx
new file mode 100644
index 0000000000..f8fd25d3b7
--- /dev/null
+++ b/src/containers/WhatsAppForms/WhatsAppForm.test.tsx
@@ -0,0 +1,86 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import * as Notification from 'common/notification';
+import { formJson, WHATSAPP_FORM_MOCKS } from 'mocks/WhatsAppForm';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import WhatsAppFormList from './WhatsAppFormList/WhatsAppFormList';
+import WhatsAppForms from './WhatsAppForms';
+
+describe('
', () => {
+ const notificationSpy = vi.spyOn(Notification, 'setNotification');
+ const wrapper = (initialEntry: string = '/whatsapp-forms/add') => (
+
+
+
+ } />
+ } />
+ } />
+
+
+
+ );
+
+ test('it should render the WhatsApp Form page initially', async () => {
+ const { getByText } = render(wrapper());
+ expect(getByText('Loading...')).toBeInTheDocument();
+
+ await waitFor(() => {
+ expect(getByText('Create WhatsApp Form')).toBeInTheDocument();
+ });
+ });
+
+ test('it should create WhatsApp Form page with form fields', async () => {
+ const { getByTestId, getByText, getAllByRole } = render(wrapper());
+ expect(getByText('Loading...')).toBeInTheDocument();
+
+ await waitFor(() => {
+ expect(getByText('Create WhatsApp Form')).toBeInTheDocument();
+ });
+
+ const inputs = getAllByRole('textbox');
+
+ fireEvent.change(inputs[0], { target: { value: 'Test Form' } });
+ fireEvent.change(inputs[1], { target: { value: 'This is a test form' } });
+ fireEvent.change(inputs[2], { target: { value: 'sign_up' } });
+
+ fireEvent.click(getByTestId('submitActionButton'));
+
+ await waitFor(() => {
+ expect(getByText('Must be valid JSON')).toBeInTheDocument();
+ });
+
+ const autocomplete = getByTestId('AutocompleteInput');
+
+ autocomplete.focus();
+ fireEvent.keyDown(autocomplete, { key: 'ArrowDown' });
+
+ fireEvent.click(getByText('Other'), { key: 'Enter' });
+ fireEvent.change(inputs[2], { target: { value: JSON.stringify(formJson) } });
+
+ fireEvent.click(getByTestId('submitActionButton'));
+
+ await waitFor(() => {
+ expect(notificationSpy).toHaveBeenCalledWith('Whatsapp Form created successfully!');
+ });
+ });
+
+ test('it should edit WhatsApp Form page with form fields', async () => {
+ const { getByTestId, getByText, getAllByRole } = render(wrapper('/whatsapp-forms/1/edit'));
+ expect(getByText('Loading...')).toBeInTheDocument();
+
+ await waitFor(() => {
+ expect(getByText('Edit WhatsApp Form')).toBeInTheDocument();
+ });
+
+ const inputs = getAllByRole('textbox');
+
+ fireEvent.change(inputs[0], { target: { value: 'Updated Form Name' } });
+ fireEvent.change(inputs[1], { target: { value: 'This is an updated test form' } });
+
+ fireEvent.click(getByTestId('submitActionButton'));
+
+ await waitFor(() => {
+ expect(notificationSpy).toHaveBeenCalled();
+ });
+ });
+});
diff --git a/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.module.css b/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.module.css
new file mode 100644
index 0000000000..ca826725a6
--- /dev/null
+++ b/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.module.css
@@ -0,0 +1,151 @@
+.SearchBar {
+ border-radius: 24px;
+ border: 1px solid #ccc;
+ display: flex;
+ margin-right: 8px;
+ height: 36px !important;
+ background: #fff;
+ min-height: 36px !important;
+}
+
+.SearchBar>fieldset {
+ border: none !important;
+}
+
+.Name {
+ width: 27%;
+ min-width: 200px;
+}
+
+.Label {
+ width: 15%;
+}
+
+.Actions {
+ width: 15%;
+ min-width: 200px;
+ text-align: end;
+}
+
+.NameText {
+ line-height: 20px;
+ margin: 0;
+ font-size: 17px !important;
+ word-break: break-all;
+ color: #191c1a !important;
+ font-weight: 500;
+}
+
+.Status {
+ display: inline-block;
+ padding: 4px 12px;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ text-align: center;
+}
+
+.PublishBadge {
+ font-size: 15px;
+ composes: Status;
+ background-color: #e8f5e9;
+ color: #2e7d32;
+}
+
+.DraftBadge {
+ font-size: 15px;
+ composes: Status;
+ background-color: #fff3cd;
+ color: #856404;
+}
+
+.InactiveBadge {
+ composes: Status;
+ font-size: 15px;
+ background-color: #f0f0f0;
+ color: #6c757d;
+}
+
+.LabelButton {
+ width: fit-content;
+ min-width: 80px;
+ margin-right: 50px;
+ padding: 6px 12px;
+ color: #555;
+ font-weight: 500;
+ font-size: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: -20px;
+ border-radius: 16px;
+ overflow: visible;
+ max-width: 220px;
+}
+
+.CategoryTag {
+ background-color: #fff;
+ border: 1px solid #c4c4c4;
+ border-radius: 12px;
+ padding: 4px 10px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #333;
+ margin-right: 6px;
+ margin-bottom: 4px;
+ display: inline-block;
+}
+
+.CategoryMore {
+ cursor: pointer;
+ color: #1f9075;
+ white-space: nowrap;
+ font-size: 12px;
+ margin-left: 4px;
+ z-index: 10;
+}
+
+.LabelWrapper {
+ position: relative;
+}
+
+.MoreWrapper {
+ position: relative;
+ display: inline-block;
+}
+
+.MoreList {
+ display: none;
+ position: absolute;
+ top: 22px;
+ left: 0;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ box-shadow: 0 4px 10px #0000001a;
+ padding: 6px;
+ z-index: 20;
+ min-width: 150px;
+}
+
+.MoreListItem {
+ padding: 5px 10px;
+ font-size: 13px;
+ color: #333;
+ background: #e4e7e4;
+ border-radius: 6px;
+ margin: 2px 0;
+ border: 1px solid #eee;
+}
+
+.MoreListItem:hover {
+ background: #f7f7f7;
+}
+
+.MoreWrapper:hover .MoreList {
+ display: block;
+}
+
+.DialogText {
+ text-align: center;
+}
diff --git a/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.test.tsx b/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.test.tsx
new file mode 100644
index 0000000000..d965606b23
--- /dev/null
+++ b/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.test.tsx
@@ -0,0 +1,214 @@
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router';
+import { vi } from 'vitest';
+import {
+ publishWhatsappForm,
+ publishWhatsappFormError,
+ WHATSAPP_FORM_MOCKS,
+ deactivateWhatsappForm,
+ deactivateWhatsappFormError,
+} from 'mocks/WhatsAppForm';
+import { MockedProvider } from '@apollo/client/testing';
+import WhatsAppForms from '../WhatsAppForms';
+import * as Notification from 'common/notification';
+import { WhatsAppFormList } from './WhatsAppFormList';
+
+export { publishWhatsappForm, publishWhatsappFormError } from 'mocks/WhatsAppForm';
+
+const mockNavigate = vi.fn();
+
+vi.mock('react-router', async () => {
+ const actual = await vi.importActual
('react-router');
+ return {
+ ...actual,
+ useNavigate: () => mockNavigate,
+ };
+});
+
+vi.mock('common/notification', async (importOriginal) => {
+ const mod = await importOriginal();
+ return {
+ ...mod,
+ setNotification: vi.fn(),
+ setErrorMessage: vi.fn(),
+ };
+});
+
+const wrapper = (extraMocks: any[] = [], initialEntry: string = '/whatsapp-forms') => {
+ const allMocks = [...WHATSAPP_FORM_MOCKS, ...extraMocks];
+ return (
+
+
+
+ } />
+ } />
+ } />
+
+
+
+ );
+};
+
+describe('', () => {
+ test('updates filter value correctly when different options are selected', async () => {
+ const { getByText, getAllByRole, findByText } = render(wrapper());
+ const select = getAllByRole('combobox')[0];
+ fireEvent.click(getByText('All'));
+
+ expect(select).toHaveTextContent('All');
+ fireEvent.mouseDown(select);
+
+ const publishedOption = await findByText('Published');
+ fireEvent.click(publishedOption);
+ expect(select).toHaveTextContent('Published');
+
+ fireEvent.mouseDown(select);
+
+ const inactiveOption = getByText('Inactive');
+ fireEvent.click(inactiveOption);
+ expect(select).toHaveTextContent('Inactive');
+
+ fireEvent.mouseDown(select);
+
+ const draftOption = getByText('Draft');
+ fireEvent.click(draftOption);
+ expect(select).toHaveTextContent('Draft');
+ });
+
+ test('navigates to add form page when "Create New Form" button clicked', () => {
+ const { getByTestId } = render(wrapper());
+
+ const button = getByTestId('newItemButton');
+ fireEvent.click(button);
+
+ expect(mockNavigate).toHaveBeenCalledWith('/whatsapp-forms/add');
+ });
+
+ test('render search bar correctly', () => {
+ const { getByTestId } = render(wrapper());
+ const search = getByTestId('searchForm');
+ expect(search).toBeInTheDocument();
+ });
+
+ test('publishes a form successfully when publish button clicked', async () => {
+ const { getByText, getAllByRole, getByTestId } = render(wrapper([publishWhatsappForm]));
+ const notificationSpy = vi.spyOn(Notification, 'setNotification');
+
+ const select = getAllByRole('combobox')[0];
+ fireEvent.click(getByText('All'));
+
+ expect(select).toHaveTextContent('All');
+ fireEvent.mouseDown(select);
+ const draftOption = getByText('Draft');
+ fireEvent.click(draftOption);
+ expect(select).toHaveTextContent('Draft');
+
+ const publishIcon = await waitFor(() => getByTestId('publish-icon'));
+ fireEvent.click(publishIcon);
+
+ await waitFor(() => {
+ expect(getByTestId('dialogTitle')).toBeInTheDocument();
+ });
+
+ expect(getByTestId('dialogTitle')).toHaveTextContent('Do you want to publish this form');
+
+ const ConfirmButton = await waitFor(() => getByTestId('ok-button'));
+ fireEvent.click(ConfirmButton);
+ await waitFor(() => {
+ expect(notificationSpy).toHaveBeenCalled();
+ });
+ });
+
+ test('shows error message when publish API fails', async () => {
+ const { getByText, getAllByRole, getByTestId } = render(wrapper([publishWhatsappFormError]));
+ const errorSpy = vi.spyOn(Notification, 'setErrorMessage');
+
+ const select = getAllByRole('combobox')[0];
+ fireEvent.click(getByText('All'));
+
+ expect(select).toHaveTextContent('All');
+ fireEvent.mouseDown(select);
+ const draftOption = getByText('Draft');
+ fireEvent.click(draftOption);
+ expect(select).toHaveTextContent('Draft');
+
+ const publishIcon = await waitFor(() => getByTestId('publish-icon'));
+ fireEvent.click(publishIcon);
+
+ await waitFor(() => {
+ expect(getByTestId('dialogTitle')).toBeInTheDocument();
+ });
+
+ expect(getByTestId('dialogTitle')).toHaveTextContent('Do you want to publish this form');
+
+ const ConfirmButton = await waitFor(() => getByTestId('ok-button'));
+ fireEvent.click(ConfirmButton);
+
+ await waitFor(() => {
+ expect(errorSpy).toHaveBeenCalled();
+ });
+ });
+
+ test('deactivate a form successfully when inactive button is clicked', async () => {
+ const { getByText, getAllByRole, getByTestId } = render(wrapper([deactivateWhatsappForm]));
+ const notificationSpy = vi.spyOn(Notification, 'setNotification');
+
+ const select = getAllByRole('combobox')[0];
+ fireEvent.click(getByText('All'));
+
+ expect(select).toHaveTextContent('All');
+
+ expect(getByTestId('loading')).toBeInTheDocument();
+
+ await waitFor(() => {
+ expect(getByText('This is form name')).toBeInTheDocument();
+ });
+
+ fireEvent.click(getByTestId('MoreIcon'));
+ fireEvent.click(getByText('Deactivate'));
+
+ await waitFor(() => {
+ expect(getByTestId('dialogTitle')).toBeInTheDocument();
+ });
+
+ expect(getByTestId('dialogTitle')).toHaveTextContent('Do you want to deactivate this form?');
+
+ const ConfirmButton = await waitFor(() => getByTestId('ok-button'));
+ fireEvent.click(ConfirmButton);
+ await waitFor(() => {
+ expect(notificationSpy).toHaveBeenCalled();
+ });
+ });
+
+ test('shows error message when deactivate API fails', async () => {
+ const { getByText, getAllByRole, getByTestId } = render(wrapper([deactivateWhatsappFormError]));
+ const errorSpy = vi.spyOn(Notification, 'setErrorMessage');
+
+ const select = getAllByRole('combobox')[0];
+ fireEvent.click(getByText('All'));
+
+ expect(select).toHaveTextContent('All');
+
+ expect(getByTestId('loading')).toBeInTheDocument();
+
+ await waitFor(() => {
+ expect(getByText('This is form name')).toBeInTheDocument();
+ });
+
+ fireEvent.click(getByTestId('MoreIcon'));
+ fireEvent.click(getByText('Deactivate'));
+
+ await waitFor(() => {
+ expect(getByTestId('dialogTitle')).toBeInTheDocument();
+ });
+
+ expect(getByTestId('dialogTitle')).toHaveTextContent('Do you want to deactivate this form?');
+
+ const ConfirmButton = await waitFor(() => getByTestId('ok-button'));
+ fireEvent.click(ConfirmButton);
+
+ await waitFor(() => {
+ expect(errorSpy).toHaveBeenCalled();
+ });
+ });
+});
diff --git a/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.tsx b/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.tsx
new file mode 100644
index 0000000000..9aaa8fe4a0
--- /dev/null
+++ b/src/containers/WhatsAppForms/WhatsAppFormList/WhatsAppFormList.tsx
@@ -0,0 +1,261 @@
+import { useMutation } from '@apollo/client';
+import { FormControl, MenuItem, Select } from '@mui/material';
+import PublishIcon from 'assets/images/icons/Publish/PublishGray.svg?react';
+import { whatsappFormsInfo } from 'common/HelpData';
+import { setErrorMessage, setNotification } from 'common/notification';
+import { DialogBox } from 'components/UI/DialogBox/DialogBox';
+import { List } from 'containers/List/List';
+import { ACTIVATE_FORM, DEACTIVATE_FORM, DELETE_FORM, PUBLISH_FORM } from 'graphql/mutations/WhatsAppForm';
+import { GET_WHATSAPP_FORM, LIST_WHATSAPP_FORMS } from 'graphql/queries/WhatsAppForm';
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router';
+import styles from './WhatsAppFormList.module.css';
+
+const columnStyles = [styles.Name, styles.status, styles.Label, styles.Actions];
+
+const queries = {
+ filterItemsQuery: LIST_WHATSAPP_FORMS,
+ deleteItemQuery: DELETE_FORM,
+ getItemQuery: GET_WHATSAPP_FORM,
+ publishFlowQuery: PUBLISH_FORM,
+};
+
+const getName = (name: string) => {name}
;
+
+const getStatus = (status: string) => {
+ if (status === 'PUBLISHED') {
+ return Published
;
+ } else if (status === 'DRAFT') {
+ return Draft
;
+ } else if (status === 'INACTIVE') {
+ return Inactive
;
+ }
+};
+
+const getCategories = (categories: string[]) => {
+ if (!categories?.length) return null;
+
+ const displayedCategories = categories.slice(0, 2);
+ const hiddenCategories = categories.slice(2);
+
+ return (
+
+
+ {displayedCategories.map((category) => (
+
+ {category}
+
+ ))}
+
+ {categories.length > 2 && (
+
+
+ {categories.length - 2} more
+
+ {hiddenCategories.map((category) => (
+
+ {category}
+
+ ))}
+
+
+ )}
+
+
{dialogText}
+
+ );
+ }
+
+ return (
+ <>
+ navigate('/whatsapp-forms/add') }}
+ searchParameter={['name']}
+ additionalAction={additionalAction}
+ dialogMessage={'The form will be permanently deleted and cannot be recovered.'}
+ />
+ {dialog}
+
+ );
+};
+
+export default WhatsAppFormList;
diff --git a/src/containers/WhatsAppForms/WhatsAppForms.tsx b/src/containers/WhatsAppForms/WhatsAppForms.tsx
new file mode 100644
index 0000000000..174e4aaa82
--- /dev/null
+++ b/src/containers/WhatsAppForms/WhatsAppForms.tsx
@@ -0,0 +1,217 @@
+import { useQuery } from '@apollo/client';
+import OpenInNew from '@mui/icons-material/OpenInNew';
+import Update from '@mui/icons-material/Update';
+import { useState } from 'react';
+import * as Yup from 'yup';
+
+import { whatsappFormsInfo } from 'common/HelpData';
+import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
+import { Button } from 'components/UI/Form/Button/Button';
+import { Input } from 'components/UI/Form/Input/Input';
+import { Heading } from 'components/UI/Heading/Heading';
+import { Loading } from 'components/UI/Layout/Loading/Loading';
+import setLogs from 'config/logs';
+import { FormLayout } from 'containers/Form/FormLayout';
+import { CREATE_FORM, DELETE_FORM, UPDATE_FORM } from 'graphql/mutations/WhatsAppForm';
+import { GET_WHATSAPP_FORM, LIST_FORM_CATEGORIES } from 'graphql/queries/WhatsAppForm';
+import { useParams } from 'react-router';
+import styles from './WhatsAppForm.module.css';
+
+const queries = {
+ getItemQuery: GET_WHATSAPP_FORM,
+ createItemQuery: CREATE_FORM,
+ updateItemQuery: UPDATE_FORM,
+ deleteItemQuery: DELETE_FORM,
+};
+
+export const WhatsAppForms = () => {
+ const [name, setName] = useState('');
+ const [description, setDescription] = useState('');
+ const [formJson, setFormJson] = useState();
+ const [formCategories, setFormCategories] = useState([]);
+ const [categories, setCategories] = useState([]);
+ const [disabled, setDisabled] = useState(false);
+ const params = useParams();
+
+ useQuery(GET_WHATSAPP_FORM, {
+ skip: !params.id,
+ variables: { id: params.id },
+ onCompleted: ({ whatsappForm }) => {
+ if (whatsappForm?.whatsappForm?.status === 'PUBLISHED') {
+ setDisabled(true);
+ }
+ },
+ });
+
+ let isEditing = false;
+ if (params.id) {
+ isEditing = true;
+ }
+
+ const { loading } = useQuery(LIST_FORM_CATEGORIES, {
+ onCompleted: ({ whatsappFormCategories }) => {
+ setCategories(
+ whatsappFormCategories.map((category: string) => ({
+ id: category,
+ name: category
+ .toLowerCase()
+ .replace(/_/g, ' ')
+ .replace(/\b\w/g, (c) => c.toUpperCase()),
+ }))
+ );
+ },
+ });
+
+ const states = {
+ name,
+ formJson: JSON.stringify(formJson),
+ formCategories,
+ description,
+ };
+
+ const setPayload = ({ name, formJson, formCategories, description }: any) => {
+ const payload = {
+ name,
+ formJson,
+ description,
+ categories: formCategories.map((category: any) => category.id),
+ };
+
+ return payload;
+ };
+ const setStates = ({ name, definition, description, categories }: any) => {
+ setName(name);
+ setDescription(description);
+
+ setFormCategories(categories.map((c: string) => ({ id: c, name: c })));
+
+ let parsedDefinition;
+ try {
+ parsedDefinition = JSON.parse(definition);
+ } catch (e) {
+ setLogs('Error parsing whatsapp form definition JSON:', 'error');
+ parsedDefinition = definition;
+ }
+ setFormJson(parsedDefinition);
+ };
+ const formFields = [
+ {
+ component: Input,
+ name: 'name',
+ type: 'text',
+ label: `${'Title'}*`,
+ placeholder: 'Enter form title',
+ disabled: disabled,
+ },
+ {
+ component: Input,
+ name: 'description',
+ type: 'text',
+ label: `${'Description'}`,
+ textArea: true,
+ rows: 2,
+ placeholder: 'Enter form description',
+ disabled: disabled,
+ },
+ {
+ component: Input,
+ name: 'formJson',
+ type: 'text',
+ label: 'Form JSON*',
+ textArea: true,
+ rows: 6,
+ placeholder: 'Paste your JSON from Meta flow builder here...',
+ disabled: disabled,
+ },
+ {
+ component: AutoComplete,
+ name: 'formCategories',
+ options: categories,
+ optionLabel: 'name',
+ label: 'Categories',
+ placeholder: 'Select categories',
+ helperText:
+ 'Choose categories that represent your form. Multiple values are possible, but at least one is required.',
+ disabled: disabled,
+ },
+ ];
+ const FormSchema = Yup.object().shape({
+ name: Yup.string().required('Title is required.').max(50, 'Title is too long.'),
+
+ formJson: Yup.string()
+ .required('Form JSON is required.')
+ .test('is-json', 'Must be valid JSON', (value) => {
+ if (!value) return false;
+ try {
+ JSON.parse(value);
+ return true;
+ } catch (error) {
+ return false;
+ }
+ }),
+
+ formCategories: Yup.array().min(1, 'At least one category must be selected.'),
+ });
+
+ if (loading) {
+ return ;
+ }
+ return (
+ <>
+
+
+
+
+
+
+
+
First, create your flow in Meta Flow Builder
+
+ Design your WhatsApp Flow using Meta's visual builder, then copy the JSON and paste it below.
+
+
+
+
+
}
+ component="a"
+ onClick={() =>
+ window.open(
+ 'https://developers.facebook.com/docs/whatsapp/flows/playground',
+ '_blank',
+ 'noopener,noreferrer'
+ )
+ }
+ >
+ Open Flow Builder
+
+