Merge pull request #2697 from glific/organisation_settings_flow

organisations settings

src/containers/SettingList/Organisation/Organisation.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import UserEvent from '@testing-library/user-event';
 import { MockedProvider } from '@apollo/client/testing';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router, MemoryRouter } from 'react-router-dom';
 
 import { ORGANISATION_MOCKS } from '../SettingList.test.helper';
 import { Organisation } from './Organisation';
@@ -10,18 +10,37 @@ const mocks = ORGANISATION_MOCKS;
 
 const wrapper = (
   <MockedProvider mocks={mocks} addTypename={false}>
-    <Router>
+    <MemoryRouter initialEntries={['/settings/organization']}>
       <Organisation />
-    </Router>
+    </MemoryRouter>
   </MockedProvider>
 );
 
+test('it should render the placeholders correctly', async () => {
+  const { getByTestId, getByText } = render(wrapper);
+
+  expect(getByText('Loading...')).toBeInTheDocument();
+
+  await waitFor(() => {
+    expect(getByTestId('formLayout')).toHaveTextContent('Organisation name');
+    expect(getByTestId('formLayout')).toHaveTextContent('Supported languages');
+    expect(getByTestId('formLayout')).toHaveTextContent('Default language');
+    expect(getByTestId('formLayout')).toHaveTextContent('Organisation phone number');
+    expect(getByTestId('formLayout')).toHaveTextContent('Low balance threshold for warning emails');
+    expect(getByTestId('formLayout')).toHaveTextContent(
+      'Critical balance threshold for warning emails'
+    );
+    expect(getByTestId('formLayout')).toHaveTextContent('Recieve warning mails?');
+  });
+});
+
 test('it renders component properly', async () => {
-  const { getByText } = render(wrapper);
+  const { getByText, getByTestId } = render(wrapper);
   // loading is show initially
   expect(getByText('Loading...')).toBeInTheDocument();
   await waitFor(() => {
     expect(getByText('Back to settings')).toBeInTheDocument();
+    expect(getByTestId('add-container')).toHaveTextContent('Organisation name');
   });
 });
 
@@ -48,10 +67,23 @@ test('it renders component in edit mode', async () => {
   // loading is show initially
   expect(getByText('Loading...')).toBeInTheDocument();
 
+  //correct values are rendered in the form
   await waitFor(() => {
-    const phoneNumber = getByTestId('phoneNumber');
+    const inputElements = screen.getAllByRole('textbox');
+    const numberInputElements = screen.getAllByRole('spinbutton');
+
+    const orgName = inputElements[0] as HTMLInputElement;
+    const signaturePhrase = inputElements[1] as HTMLInputElement;
+    const phoneNumber = inputElements[2] as HTMLInputElement;
+    const lowBalanceThreshold = numberInputElements[0] as HTMLInputElement;
+    const criticalBalanceThreshold = numberInputElements[1] as HTMLInputElement;
+
     fireEvent.click(phoneNumber);
-    expect(phoneNumber).toBeInTheDocument();
+    expect(orgName?.value).toBe('Glific');
+    expect(signaturePhrase?.value).toBe('Please change me, NOW!');
+    expect(phoneNumber?.value).toBe('917834811114');
+    expect(lowBalanceThreshold?.value).toBe('10');
+    expect(criticalBalanceThreshold?.value).toBe('5');
   });
 
   await waitFor(() => {

src/containers/SettingList/Organisation/Organisation.tsx

@@ -19,6 +19,7 @@ import Settingicon from 'assets/images/icons/Settings/Settings.svg?react';
 import CopyIcon from 'assets/images/icons/Settings/Copy.svg?react';
 import { copyToClipboard } from 'common/utils';
 import styles from './Organisation.module.css';
+import { Checkbox } from 'components/UI/Form/Checkbox/Checkbox';
 
 const SettingIcon = <Settingicon />;
 
@@ -38,6 +39,9 @@ export const Organisation = () => {
   const [signaturePhrase, setSignaturePhrase] = useState('');
   const [phone, setPhone] = useState<string>('');
   const [tier, setTier] = useState();
+  const [lowBalanceThreshold, setLowBalanceThreshold] = useState('');
+  const [criticalBalanceThreshold, setCriticalBalanceThreshold] = useState('');
+  const [sendWarningMail, setSendWarningMail] = useState<boolean>(false);
 
   const { t } = useTranslation();
 
@@ -48,6 +52,9 @@ export const Organisation = () => {
     signaturePhrase,
     phone,
     tier,
+    lowBalanceThreshold,
+    criticalBalanceThreshold,
+    sendWarningMail,
   };
 
   const { data: languages } = useQuery(GET_LANGUAGES, {
@@ -62,18 +69,26 @@ export const Organisation = () => {
 
   const [getOrg, { data: orgData }] = useLazyQuery<any>(GET_ORGANIZATION);
 
+  const setSettings = (data: any) => {
+    setLowBalanceThreshold(data.lowBalanceThreshold);
+    setCriticalBalanceThreshold(data.criticalBalanceThreshold);
+    setSendWarningMail(data.sendWarningMail);
+  };
+
   const setStates = ({
     name: nameValue,
     activeLanguages: activeLanguagesValue,
     defaultLanguage: defaultLanguageValue,
     signaturePhrase: signaturePhraseValue,
     contact: contactValue,
+    setting: settingValue,
   }: any) => {
     setName(nameValue);
     setSignaturePhrase(signaturePhraseValue);
     if (activeLanguagesValue) setActiveLanguages(activeLanguagesValue);
     if (defaultLanguageValue) setDefaultLanguage(defaultLanguageValue);
     setPhone(contactValue.phone);
+    setSettings(settingValue);
   };
 
   useEffect(() => {
@@ -111,11 +126,22 @@ export const Organisation = () => {
     return error;
   };
 
+  const handleSendWarningMails = (sendWarningMail: boolean) => {
+    setSendWarningMail(sendWarningMail);
+  };
+
   const validation = {
     name: Yup.string().required(t('Organisation name is required.')),
     activeLanguages: Yup.array().required(t('Supported Languages is required.')),
     defaultLanguage: Yup.object().nullable().required(t('Default Language is required.')),
     signaturePhrase: Yup.string().nullable().required(t('Webhook signature is required.')),
+    criticalBalanceThreshold: Yup.number()
+      .min(0, t('Threshold value should not be negative!'))
+      .required(t('Critical Balance Threshold is required.')),
+    lowBalanceThreshold: Yup.number()
+      .min(0, t('Threshold value should not be negative!'))
+      .required(t('Low Balance Threshold is required.')),
+    sendWarningMail: Yup.bool(),
   };
 
   const FormSchema = Yup.object().shape(validation);
@@ -184,6 +210,28 @@ export const Organisation = () => {
       skip: !tier,
       disabled: true,
     },
+    {
+      component: Checkbox,
+      name: 'sendWarningMail',
+      handleChange: handleSendWarningMails,
+      title: t('Recieve warning mails?'),
+    },
+    {
+      component: Input,
+      name: 'lowBalanceThreshold',
+      type: 'number',
+      placeholder: t('Low balance threshold for warning emails'),
+      disabled: !sendWarningMail,
+      helperText: t('Recieve low balance threshold mails once a week.'),
+    },
+    {
+      component: Input,
+      name: 'criticalBalanceThreshold',
+      type: 'number',
+      placeholder: t('Critical balance threshold for warning emails'),
+      disabled: !sendWarningMail,
+      helperText: t('Recieve critical balance threshold mails every two days.'),
+    },
   ];
 
   const saveHandler = (data: any) => {
@@ -204,6 +252,11 @@ export const Organisation = () => {
       activeLanguageIds,
       signaturePhrase: payload.signaturePhrase,
       defaultLanguageId: payload.defaultLanguage.id,
+      setting: {
+        lowBalanceThreshold: payload.lowBalanceThreshold.toString(),
+        criticalBalanceThreshold: payload.criticalBalanceThreshold.toString(),
+        sendWarningMail: payload.sendWarningMail,
+      },
     };
     return object;
   };

src/containers/SettingList/SettingList.test.helper.ts

@@ -92,6 +92,11 @@ const updateOrganisationMock = {
         endTime: '20:00:00',
         flowId: null,
         startTime: '09:00:00',
+        setting: {
+          lowBalanceThreshold: '10',
+          criticalBalanceThreshold: '5',
+          sendWarningMail: false,
+        },
       },
     },
   },
@@ -122,6 +127,68 @@ const updateOrganisationMock = {
             flowId: null,
             startTime: '09:00:00',
           },
+          setting: {
+            lowBalanceThreshold: '10',
+            criticalBalanceThreshold: '5',
+            sendWarningMail: false,
+          },
+          shortcode: 'glific',
+        },
+      },
+    },
+  },
+};
+
+const updateOrganisationMock2 = {
+  request: {
+    query: UPDATE_ORGANIZATION,
+    variables: {
+      id: 1,
+      input: {
+        name: 'Glific',
+        activeLanguageIds: ['1', '2'],
+        signaturePhrase: 'Please change me, NOW!',
+        defaultLanguageId: '1',
+        setting: {
+          lowBalanceThreshold: '10',
+          criticalBalanceThreshold: '5',
+          sendWarningMail: false,
+        },
+      },
+    },
+  },
+  result: {
+    data: {
+      updateOrganization: {
+        errors: null,
+        organization: {
+          activeLanguages: [
+            { id: '1', label: 'English' },
+            { id: '2', label: 'Hindi' },
+          ],
+          id: '1',
+          name: 'Glific',
+          outOfOffice: {
+            defaultFlowId: '7',
+            enabled: true,
+            enabledDays: [
+              { id: 1, enabled: true },
+              { id: 2, enabled: true },
+              { id: 3, enabled: true },
+              { id: 4, enabled: true },
+              { id: 5, enabled: true },
+              { id: 6, enabled: true },
+              { id: 7, enabled: true },
+            ],
+            endTime: '20:00:00',
+            flowId: null,
+            startTime: '09:00:00',
+          },
+          setting: {
+            lowBalanceThreshold: '10',
+            criticalBalanceThreshold: '5',
+            sendWarningMail: false,
+          },
           shortcode: 'glific',
         },
       },
@@ -137,4 +204,5 @@ export const ORGANISATION_MOCKS = [
   flowsMock,
   ...getOrganizationQuery,
   updateOrganisationMock,
+  updateOrganisationMock2,
 ];

src/graphql/mutations/Organization.ts

@@ -26,6 +26,11 @@ export const UPDATE_ORGANIZATION = gql`
           id
           label
         }
+        setting {
+          lowBalanceThreshold
+          criticalBalanceThreshold
+          sendWarningMail
+        }
       }
       errors {
         key

src/graphql/queries/Organization.ts

@@ -28,6 +28,11 @@ export const GET_ORGANIZATION = gql`
           id
           label
         }
+        setting {
+          lowBalanceThreshold
+          criticalBalanceThreshold
+          sendWarningMail
+        }
         signaturePhrase
         newcontactFlowId
         optinFlowId

src/i18n/en/en.json

@@ -447,5 +447,14 @@
   "Generate translations for all available languages automatically.": "Generate translations for all available languages automatically.",
   "Translate the content and export it as a CSV file.": "Translate the content and export it as a CSV file.",
   "Export the content without any automatic translations.": "Export the content without any automatic translations.",
-  "Import translations from a CSV file into the application.": "Import translations from a CSV file into the application."
+  "Import translations from a CSV file into the application.": "Import translations from a CSV file into the application.",
+  "An error occured while translating flows.": "An error occured while translating flows.",
+  "Recieve warning mails?": "Recieve warning mails?",
+  "Critical balance threshold for warning emails": "Critical balance threshold for warning emails",
+  "Low balance threshold for warning emails": "Low balance threshold for warning emails",
+  "Threshold value should not be negative!": "Threshold value should not be negative!",
+  "Low Balance Threshold is required.": "Low Balance Threshold is required.",
+  "Critical Balance Threshold is required.": "Critical Balance Threshold is required.",
+  "Recieve critical balance threshold mails every two days.": "Recieve critical balance threshold mails every two days.",
+  "Recieve low balance threshold mails once a week.": "Recieve low balance threshold mails once a week."
 }

src/mocks/Organization.tsx

@@ -47,6 +47,11 @@ export const getOrganizationQuery = [
               flowId: 2,
               startTime: '12:31:27',
             },
+            setting: {
+              lowBalanceThreshold: '10',
+              criticalBalanceThreshold: '5',
+              sendWarningMail: false,
+            },
             name: 'Glific',
             signaturePhrase: 'Sample text',
             contact: {
@@ -91,6 +96,11 @@ export const getOrganizationQuery = [
               flowId: 2,
               startTime: '12:31:27',
             },
+            setting: {
+              lowBalanceThreshold: '10',
+              criticalBalanceThreshold: '5',
+              sendWarningMail: false,
+            },
             name: 'Glific',
             signaturePhrase: 'Sample text',
             contact: {
@@ -136,6 +146,11 @@ export const getOrganizationQuery = [
               flowId: '1',
               startTime: '09:00:00',
             },
+            setting: {
+              lowBalanceThreshold: '10',
+              criticalBalanceThreshold: '5',
+              sendWarningMail: false,
+            },
             signaturePhrase: 'Please change me, NOW!',
           },
         },
@@ -177,6 +192,11 @@ export const getOrganisationSettings = {
             flowId: 2,
             startTime: '12:31:27',
           },
+          setting: {
+            lowBalanceThreshold: '10',
+            criticalBalanceThreshold: '5',
+            sendWarningMail: false,
+          },
           name: 'Glific',
           signaturePhrase: 'Sample text',
           contact: {