Merge pull request #3663 from glific/hide-whatsapp-forms-under-flag

Hide whatsapp forms button under the feature flag

Author: akanshaaa19

src/common/constants.ts

@@ -185,6 +185,12 @@ export const LOCATION_REQUEST = 'LOCATION_REQUEST_MESSAGE';
 export const TERMS_OF_USE_LINK = 'https://glific.org/glific-terms-and-conditions/';
 export const COMPACT_MESSAGE_LENGTH = 35;
 
+export const BUTTON_OPTIONS: any = [
+  { id: 'CALL_TO_ACTION', label: 'Call to Action' },
+  { id: 'QUICK_REPLY', label: 'Quick Reply' },
+  { id: 'WHATSAPP_FORM', label: 'WhatsApp Form' },
+];
+
 // Gupshup sample media
 export const SAMPLE_MEDIA_FOR_SIMULATOR = [
   {

src/containers/HSM/HSM.test.tsx

@@ -1,4 +1,4 @@
-import { render, waitFor, within, fireEvent, screen, cleanup } from '@testing-library/react';
+import { render, waitFor, within, fireEvent, screen } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter, Route, Routes } from 'react-router';
@@ -12,6 +12,7 @@ import {
 import { WHATSAPP_FORM_MOCKS } from 'mocks/WhatsAppForm';
 import { setNotification } from 'common/notification';
 import * as utilsModule from 'common/utils';
+import { setOrganizationServices } from 'services/AuthService';
 
 const mocks = HSM_TEMPLATE_MOCKS;
 
@@ -25,10 +26,6 @@ vi.mock('common/notification', async (importOriginal) => {
   };
 });
 
-beforeEach(() => {
-  cleanup();
-});
-
 vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
   const actual = (await importOriginal()) as typeof import('lexical-beautiful-mentions');
   return {
@@ -195,6 +192,8 @@ describe('Add mode', () => {
   });
 
   test('it should create a hsm template with whatsapp form', async () => {
+    setOrganizationServices('{"__typename":"OrganizationServicesResult","whatsappFormsEnabled":true}');
+
     render(template);
 
     await waitFor(() => {
@@ -267,6 +266,22 @@ describe('Add mode', () => {
     });
   });
 
+  test('should not display WhatsApp Form when whatsappFormsEnabled is false', async () => {
+    setOrganizationServices('{"__typename":"OrganizationServicesResult","whatsappFormsEnabled":false}');
+
+    render(template);
+
+    await waitFor(() => {
+      expect(screen.getByText('Add a new HSM Template')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('Add buttons'));
+
+    const combobox = screen.getAllByRole('combobox');
+    const buttonTypeCombo = combobox[1] as HTMLInputElement;
+    fireEvent.mouseDown(buttonTypeCombo);
+    expect(screen.queryByText('WhatsApp Form')).not.toBeInTheDocument();
+  });
+
   test('it adds quick reply buttons', async () => {
     render(template);
 

src/containers/HSM/HSM.tsx

@@ -8,7 +8,7 @@ import * as Yup from 'yup';
 
 import TemplateIcon from 'assets/images/icons/Template/UnselectedDark.svg?react';
 
-import { CALL_TO_ACTION, QUICK_REPLY } from 'common/constants';
+import { BUTTON_OPTIONS, CALL_TO_ACTION, QUICK_REPLY } from 'common/constants';
 import { validateMedia } from 'common/utils';
 import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete';
 import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox';
@@ -60,12 +60,6 @@ const buttonTypes: any = {
   WHATSAPP_FORM: { type: 'whatsapp_form', form_id: '', text: '', navigate_screen: '' },
 };
 
-export const buttonOptions: any = [
-  { id: 'CALL_TO_ACTION', label: 'Call to Action' },
-  { id: 'QUICK_REPLY', label: 'Quick Reply' },
-  { id: 'WHATSAPP_FORM', label: 'WhatsApp Form' },
-];
-
 export const HSM = () => {
   const location: any = useLocation();
   const [language, setLanguageId] = useState<any>(null);
@@ -89,7 +83,7 @@ export const HSM = () => {
   const [languageOptions, setLanguageOptions] = useState<any>([]);
   const [validatingURL, setValidatingURL] = useState<boolean>(false);
   const [isUrlValid, setIsUrlValid] = useState<any>();
-  const [templateType, setTemplateType] = useState<any>(buttonOptions[0]);
+  const [templateType, setTemplateType] = useState<any>(BUTTON_OPTIONS[0]);
   const [dynamicUrlParams, setDynamicUrlParams] = useState<any>({
     urlType: 'Static',
     sampleSuffix: '',
@@ -333,7 +327,7 @@ export const HSM = () => {
     if (hasButtons) {
       const { buttons: buttonsVal } = getTemplateAndButtons(templateButtonType, exampleValue, buttons);
       setTemplateButtons(buttonsVal);
-      setTemplateType(buttonOptions.find((btn: any) => btn.id === templateButtonType));
+      setTemplateType(BUTTON_OPTIONS.find((btn: any) => btn.id === templateButtonType));
       setIsAddButtonChecked(hasButtons);
       const parse = convertButtonsToTemplate(buttonsVal, templateButtonType);
       const parsedText = parse.length ? `| ${parse.join(' | ')}` : null;

src/containers/TemplateOptions/TemplateOptions.tsx

@@ -22,12 +22,13 @@ import {
   QUICK_REPLY,
   WHATSAPP_FORM,
   GUPSHUP_WHATSAPP_FORM,
+  BUTTON_OPTIONS,
 } from 'common/constants';
 import styles from './TemplateOptions.module.css';
 import { Fragment, useState } from 'react';
-import { buttonOptions } from 'containers/HSM/HSM';
 import { useQuery } from '@apollo/client';
 import { LIST_WHATSAPP_FORMS } from 'graphql/queries/WhatsAppForm';
+import { getOrganizationServices } from 'services/AuthService';
 
 export interface TemplateOptionsProps {
   isAddButtonChecked: boolean;
@@ -80,6 +81,12 @@ export const TemplateOptions = ({
   const { urlType, sampleSuffix } = dynamicUrlParams;
   const [screens, setScreens] = useState<any>([]);
 
+  const isWhatsAppFormEnabled = getOrganizationServices('whatsappFormsEnabled');
+  let buttonOptions = BUTTON_OPTIONS;
+  if (!isWhatsAppFormEnabled) {
+    buttonOptions = BUTTON_OPTIONS.filter((option: any) => option.id !== WHATSAPP_FORM);
+  }
+
   useQuery(LIST_WHATSAPP_FORMS, {
     variables: {
       filter: { status: 'PUBLISHED' },