@openmrs/esm-sms-app 1.0.1-pre.22

package/src/providers/test-form/provider-config-test-form.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { renderWithSwr } from 'tools';
+import ConfigTestForm from './provider-config-test-form.workspace';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { saveConfig, sendTestMessage } from '../../api/providers.resource';
+
+jest.mock('zod', () => {
+  const originalModule = jest.requireActual('zod');
+  const mockedZod = {
+    ...originalModule,
+    z: {
+      ...originalModule.z,
+      schema: jest.fn(() => ({
+        safeParse: jest.fn(() => ({
+          success: true,
+          data: {},
+        })),
+      })),
+    },
+  };
+  return mockedZod;
+});
+
+jest.mock('../../api/providers.resource', () => ({
+  sendTestMessage: jest.fn(),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  openmrsFetch: jest.fn(),
+  showSnackbar: jest.fn(),
+  useLayoutType: () => 'desktop',
+  useConfig: jest.fn(() => ({ configurationPageSize: 10 })),
+  ResponsiveWrapper: ({ children }) => <div>{children}</div>,
+}));
+
+jest.mock('../../hooks/useLogs', () => ({
+  useLogsRecords: jest.fn(() => ({ mutateLogs: jest.fn() })),
+}));
+
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockUseConfig = saveConfig as jest.Mock;
+const mockSendTestMessage = sendTestMessage as jest.Mock;
+
+describe('AddProviderConfigForm', () => {
+  it('Renders form fields correctly', async () => {
+    renderConfigTestForm();
+    const inputs = getFormInputs();
+
+    expect(inputs.deliveryTimeInput).toBeInTheDocument();
+    expect(inputs.recipientsInput).toBeInTheDocument();
+    expect(inputs.testMessageInput).toBeInTheDocument();
+    expect(inputs.customParamsInput).toBeInTheDocument();
+
+    const buttons = getFormButtons();
+    expect(buttons.cancelButton).toBeInTheDocument();
+    expect(buttons.cancelButton).not.toBeDisabled();
+    expect(buttons.submitButton).toBeInTheDocument();
+    expect(buttons.submitButton).not.toBeDisabled();
+  });
+
+  it('sends a test message', async () => {
+    mockOpenmrsFetch.mockReturnValue(mockTestMessageResponse);
+    const user = userEvent.setup();
+    renderConfigTestForm();
+    const inputs = getFormInputs();
+
+    await fillFormInputs(user, inputs, {
+      deliveryTime: '0',
+      recipients: '1234567890',
+      testMessage: 'Hello world',
+    });
+
+    const buttons = getFormButtons();
+    await user.click(buttons.submitButton);
+  });
+
+  it('should show field errors when invalid data type is provided', async () => {
+    const user = userEvent.setup();
+    renderConfigTestForm();
+
+    const formbuttons = getFormButtons();
+    await user.click(formbuttons.submitButton);
+
+    expect(screen.getAllByText('Required')).toHaveLength(3);
+  });
+});
+
+function renderConfigTestForm() {
+  const props = { providerName: 'test-provider' };
+  return renderWithSwr(<ConfigTestForm {...props} />);
+}
+
+function getFormInputs() {
+  return {
+    deliveryTimeInput: screen.getByTestId('delivery-time'),
+    recipientsInput: screen.getByTestId('recipients'),
+    testMessageInput: screen.getByTestId('test-message'),
+    customParamsInput: screen.getByTestId('custom-params'),
+  };
+}
+
+function getFormButtons() {
+  return {
+    cancelButton: screen.getByRole('button', { name: /Discard/i }),
+    submitButton: screen.getByRole('button', { name: /Send and close/i }),
+  };
+}
+
+async function fillFormInputs(user, inputs, values) {
+  await user.click(inputs.deliveryTimeInput, values.deliveryTime);
+  await user.type(inputs.recipientsInput, values.recipients);
+  await user.type(inputs.testMessageInput, values.testMessage);
+}
+
+const mockTestMessageResponse = {
+  config: 'test-provider',
+  deliveryTime: '0',
+  recipients: '1234567890',
+  testMessage: 'Hello world',
+};

package/src/providers/test-form/provider-config-test-form.workspace.tsx

@@ -0,0 +1,233 @@
+import classnames from 'classnames';
+import React, { useCallback } from 'react';
+import {
+  RadioButton,
+  Stack,
+  Row,
+  RadioButtonGroup,
+  Column,
+  Form,
+  TextInput,
+  ButtonSet,
+  Button,
+  AccordionItem,
+  InlineLoading,
+  Accordion,
+  TextArea,
+} from '@carbon/react';
+import { ResponsiveWrapper, useLayoutType, showSnackbar, closeWorkspace } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './provider-config-test-form.scss';
+import { z } from 'zod';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { sendTestMessage } from '../../api/providers.resource';
+import { useLogsRecords } from '../../hooks/useLogs';
+
+const configTestFormSchema = z.object({
+  deliveryTime: z.number(),
+  recipients: z
+    .string()
+    .refine((val) => !val.includes('+'), {
+      message: 'Phone numbers should not contain the "+" sign.',
+    })
+    .refine((val) => val.split(',').every((num) => num.trim().length >= 10), {
+      message: 'Each phone number must have at least 10 digits.',
+    })
+    .refine((val) => val.split(',').every((num) => num.trim().length <= 15), {
+      message: 'Each phone number must have no more than 15 digits.',
+    })
+    .refine((val) => val.split(',').every((num) => /^[0-9\s\-()]+$/.test(num.trim())), {
+      message: 'Phone numbers can only contain digits, spaces, hyphens, and parentheses.',
+    }),
+  message: z.string(),
+  customParams: z.string().optional(),
+});
+
+type ConfigTestFormData = z.infer<typeof configTestFormSchema>;
+
+interface ProviderConfigTestFormProps {
+  providerName: string;
+}
+const ProviderConfigTestForm: React.FC<ProviderConfigTestFormProps> = ({ providerName }) => {
+  const { t } = useTranslation();
+  const { mutateLogs } = useLogsRecords();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting },
+  } = useForm<ConfigTestFormData>({
+    mode: 'all',
+    resolver: zodResolver(configTestFormSchema),
+  });
+  const deliveryTimes = [
+    { key: 'immediately', labelText: 'Immediately', value: 0 },
+    { key: 'after10secs', labelText: '10s', value: 10000 },
+    { key: 'after1min', labelText: '1m', value: 60000 },
+    { key: 'afterOneHour', labelText: '30s', value: 3600000 },
+  ];
+
+  const getFutureTime = (delay: number) => {
+    const currentTime = new Date();
+    const futureTime = new Date(currentTime.getTime() + delay);
+    return futureTime.toISOString();
+  };
+
+  const onSubmit = useCallback(
+    async (data: ConfigTestFormData) => {
+      const { deliveryTime, recipients, message, customParams } = data;
+      const futureTime = getFutureTime(deliveryTime);
+      const recipientsArray = recipients.split(',').map((num) => num.trim());
+      const payload = {
+        config: providerName,
+        deliveryTime: futureTime,
+        recipients: recipientsArray,
+        message,
+        customParams,
+      };
+      await sendTestMessage(payload)
+        .then(() => {
+          mutateLogs();
+          showSnackbar({
+            title: t('testMessageSent', 'Message sent'),
+            kind: 'success',
+            autoClose: true,
+          });
+        })
+        .catch((errror) =>
+          showSnackbar({
+            title: t('errorSendingMessage', 'Message not sent'),
+            subtitle: errror?.message,
+            kind: 'error',
+          }),
+        );
+    },
+    [providerName, mutateLogs, t],
+  );
+
+  return (
+    <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={2} className={styles.formContainer}>
+        <Row className={styles.row}>
+          <Column sm={1}>
+            <span className={styles.columnLabel}>{t('deliveryTime', 'Delivery Time')}</span>
+          </Column>
+          <Column sm={3}>
+            <Controller
+              name="deliveryTime"
+              control={control}
+              render={({ field, fieldState: { error } }) => (
+                <RadioButtonGroup
+                  {...field}
+                  invalid={!!error?.message}
+                  invalidText={error?.message}
+                  className={styles.radioButtonGroup}
+                  orientation="vertical"
+                  data-testid="delivery-time"
+                >
+                  {deliveryTimes.map((deliveryTime) => (
+                    <RadioButton
+                      key={deliveryTime.key}
+                      labelText={deliveryTime.labelText}
+                      value={deliveryTime.value}
+                      id={deliveryTime.key}
+                    />
+                  ))}
+                </RadioButtonGroup>
+              )}
+            />
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <Column sm={1}>
+            <span className={styles.columnLabel}>{t('recipients', 'Recipient(s)')}</span>
+          </Column>
+          <Column sm={3}>
+            <ResponsiveWrapper>
+              <Controller
+                name="recipients"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <TextInput
+                    {...field}
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    labelText={t('multipleRecipientsNotice', 'Separate multiple numbers with comma')}
+                    placeholder={t('placeHolder', 'Enter phone +123455690, +09348...')}
+                    data-testid="recipients"
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <Column sm={1}>
+            <span className={styles.columnLabel}>{t('message', 'Message')}</span>
+          </Column>
+          <Column sm={3}>
+            <ResponsiveWrapper>
+              <Controller
+                name="message"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <TextArea
+                    {...field}
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    labelText={t('writeTestMessage', 'Write your test message')}
+                    placeholder={t('writeTestMessage', 'Write your test message')}
+                    data-testid="test-message"
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <ResponsiveWrapper>
+            <Accordion>
+              <AccordionItem title={t('advanced', 'Advanced')}>
+                <Column sm={1}>
+                  <span className={styles.columnLabel}>{t('customParameters', 'Custom params (optional)')}</span>
+                </Column>
+                <Column sm={3}>
+                  <ResponsiveWrapper>
+                    <Controller
+                      name="customParams"
+                      control={control}
+                      render={({ field }) => (
+                        <TextArea
+                          {...field}
+                          labelText={t('mapCustomParams', 'Map custom params in key:value format')}
+                          placeholder={t('enterCustomParams', 'Enter custom parameters. Use new line as separator')}
+                          data-testid="custom-params"
+                        />
+                      )}
+                    />
+                  </ResponsiveWrapper>
+                </Column>
+              </AccordionItem>
+            </Accordion>
+          </ResponsiveWrapper>
+        </Row>
+      </Stack>
+      <ButtonSet className={classnames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace('provider-config-test-form')}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit" disabled={isSubmitting}>
+          {isSubmitting ? (
+            <InlineLoading description={t('sending', 'Sending') + '...'} />
+          ) : (
+            <span>{t('sendAndClose', 'Send and close')}</span>
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default ProviderConfigTestForm;

package/src/providers/utils/index.ts

@@ -0,0 +1,57 @@
+import { useMemo, useState } from 'react';
+import { type ConfigurationTableDataRow, type ConfigurationTableHeader } from '../../types';
+
+export function readFileAsString(file: File) {
+  return new Promise<string>((resolve) => {
+    if (file) {
+      const reader = new FileReader();
+
+      reader.addEventListener('load', () => {
+        if (typeof reader.result === 'string') {
+          resolve(reader.result);
+        } else {
+          resolve('');
+        }
+      });
+
+      reader.addEventListener('error', () => {
+        resolve('');
+      });
+
+      reader.readAsDataURL(file);
+    } else {
+      resolve('');
+    }
+  });
+}
+
+export function useConfigurationsSorting(
+  tableHeaders: Array<ConfigurationTableHeader>,
+  tableRows: Array<ConfigurationTableDataRow>,
+) {
+  const [sortParams, setSortParams] = useState<{
+    key: ConfigurationTableHeader['key'] | '';
+    sortDirection: 'ASC' | 'DESC' | 'NONE';
+  }>({ key: '', sortDirection: 'NONE' });
+  const sortRow = (cellA, cellB, { key, sortDirection }) => {
+    setSortParams({ key, sortDirection });
+  };
+  const sortedRows = useMemo(() => {
+    if (sortParams.sortDirection === 'NONE') {
+      return tableRows;
+    }
+
+    const { key, sortDirection } = sortParams;
+    const tableHeader = tableHeaders.find((h) => h.key === key);
+
+    return tableRows?.slice().sort((a, b) => {
+      const sortingNum = tableHeader.sortFunc(a, b);
+      return sortDirection === 'DESC' ? sortingNum : -sortingNum;
+    });
+  }, [sortParams, tableRows, tableHeaders]);
+
+  return {
+    sortedRows,
+    sortRow,
+  };
+}

package/src/root.scss

@@ -0,0 +1,39 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.productiveHeading01 {
+  @include type.type-style("heading-01");
+}
+
+.productiveHeading02 {
+  @include type.type-style("heading-02");
+}
+
+.productiveHeading03 {
+  @include type.type-style("heading-03");
+}
+
+.productiveHeading04 {
+  @include type.type-style("heading-04");
+}
+
+.bodyLong01 {
+  @include type.type-style("body-01");
+}
+
+.bodyShort01 {
+  @include type.type-style("body-compact-01");
+}
+
+.bodyShort02 {
+  @include type.type-style("body-compact-02");
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.label01 {
+  @include type.type-style("label-01")
+}

package/src/routes.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {},
+  "extensions": [
+    {
+      "name": "sms-providers-settings-admin-card-link",
+      "component": "smsAdminCardLink",
+      "slot": "system-admin-page-card-link-slot",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "add-provider-config-form",
+      "component": "addProviderConfigForm",
+      "title": "addProviderConfigWorkspaceTitle"
+    },
+    {
+      "name": "provider-config-test-form",
+      "component": "providerConfigTestForm",
+      "title": "providerConfigTestWorkspaceTitle"
+    }
+  ],
+  "pages": [
+    {
+      "component": "providersDashboard",
+      "route": "provider-settings",
+      "online": true,
+      "offline": true,
+      "order": 1
+    }
+  ],
+  "modals": [
+    {
+      "name": "config-upload-modal",
+      "component": "configUploadModal"
+    },
+    {
+      "name": "remove-config-modal",
+      "component": "removeConfigModal"
+    }
+  ]
+}

package/src/sms-admin-card-link.component.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, ClickableTile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+
+const SMSAdminCardLink: React.FC = () => {
+  const { t } = useTranslation();
+  const header = t('smsConfiguration', 'SMS Configuration');
+  return (
+    <Layer>
+      <ClickableTile href={window.spaBase + '/provider-settings'} rel="noopener noreferrer" target="_blank">
+        <div>
+          <div className="heading">{header}</div>
+          <div className="content">{t('smsProviderSettings', 'SMS Provider Settings')}</div>
+        </div>
+        <div className="iconWrapper">
+          <ArrowRight size={16} />
+        </div>
+      </ClickableTile>
+    </Layer>
+  );
+};
+
+export default SMSAdminCardLink;

package/src/types/index.ts

@@ -0,0 +1,68 @@
+export interface ProviderConfiguration {
+  name: string;
+  maxRetries: number;
+  excludeLastFooter: boolean;
+  splitHeader: string;
+  splitFooter: string;
+  templateName: string;
+  props: Array<Prop>;
+  automaticResponseScript: string;
+}
+
+export type Prop = {
+  name: string;
+  value: string;
+};
+
+export interface ProviderConfigurationsResponse {
+  defaultConfigName: string;
+  configs: Array<ProviderConfiguration>;
+  defaultConfig: ProviderConfiguration;
+  empty: boolean;
+}
+
+export interface ConfigurationTableHeader {
+  key: string;
+  header: string;
+  isSortable: boolean;
+  sortFunc: (valueA: any, valueB: any) => any;
+}
+
+export interface ConfigurationTableDataRow extends ProviderConfiguration {
+  configuration: string;
+  id: string;
+}
+
+export interface SMSLog {
+  id: number;
+  errorMessage: string;
+  providerStatus: string;
+  openMrsId: string;
+  providerId: string;
+  deliveryStatus: string;
+  messageContent: string;
+  timestamp: string;
+  config: string;
+  smsDirection: string;
+  phoneNumber: string;
+  modificationDate: string;
+  creationDate: string;
+  modifiedBy: string;
+  creator: string;
+}
+
+export interface SMSLogsResponse {
+  pageIndex: number;
+  pageSize: number;
+  totalRecords: number;
+  rows: Array<SMSLog>;
+}
+
+export interface ServiceConfigTemplate {
+  name: string;
+  configurables: string[];
+}
+
+export interface ServiceConfigTemplates {
+  [key: string]: ServiceConfigTemplate;
+}

package/translations/am.json

@@ -0,0 +1,4 @@
+{
+  "smsConfiguration": "SMS Configuration",
+  "smsProviderSettings": "SMS Provider Settings"
+}

package/translations/en.json

@@ -0,0 +1,47 @@
+{
+  "add": "Add",
+  "addProviderConfigWorkspaceTitle": "Add Provider",
+  "config": "Configuration",
+  "configDetails": "Configuration details",
+  "configuration": "Configuration",
+  "configurations": "Configurations",
+  "creationDate": "Creation date",
+  "creator": "Creator",
+  "default": "Default",
+  "defaultConfigUpdated": "Default config updated",
+  "deliveryStatus": "Delivery status",
+  "edit": "Edit",
+  "editConfig": "Edit {{configName}}",
+  "emptyTableStateText": "There are no {{displayText}} to display",
+  "errorMakingDefault": "Failed to update default config",
+  "errorMessage": "Error message",
+  "fitlerLogsByNumber": "Fitler logs by phone number",
+  "importConfig": "Import config template",
+  "logs": "Logs",
+  "maxRetries": "Maximum retries",
+  "messageContent": "Message",
+  "modificationDate": "Modification date",
+  "modifiedBy": "Modified by",
+  "noConfigurationsToDisplay": "No configurations to display",
+  "noSmsLogsToDisplay": "No SMS Logs to display",
+  "openMrsId": "Openmrs ID",
+  "phoneNumber": "Phone number",
+  "providerId": "Provider",
+  "providerName": "Provider name",
+  "providers": "Providers",
+  "providerStatus": "Provider status",
+  "record": "Record",
+  "remove": "Remove",
+  "setDefault": "Set as default",
+  "smsConfiguration": "SMS Configuration",
+  "smsDirection": "SMS direction",
+  "smsLogs": "SMS Logs",
+  "smsProviderSettings": "SMS Provider Settings",
+  "splitFooter": "Footer split text",
+  "splitHeader": "Header split text",
+  "template": "Template",
+  "templateName": "Template name",
+  "test": "Test",
+  "testConfig": "Test {{ configName }}",
+  "timestamp": "Timestamp"
+}

package/translations/es.json

@@ -0,0 +1,4 @@
+{
+  "smsConfiguration": "SMS Configuration",
+  "smsProviderSettings": "SMS Provider Settings"
+}

package/translations/fr.json

@@ -0,0 +1,4 @@
+{
+  "smsConfiguration": "SMS Configuration",
+  "smsProviderSettings": "SMS Provider Settings"
+}

package/translations/he.json

@@ -0,0 +1,4 @@
+{
+  "smsConfiguration": "SMS Configuration",
+  "smsProviderSettings": "SMS Provider Settings"
+}

package/translations/km.json

@@ -0,0 +1,4 @@
+{
+  "smsConfiguration": "SMS Configuration",
+  "smsProviderSettings": "SMS Provider Settings"
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');