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

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

@@ -0,0 +1,347 @@
+import classnames from 'classnames';
+import {
+  Stack,
+  Column,
+  Form,
+  TextInput,
+  Row,
+  ButtonSet,
+  Button,
+  AccordionItem,
+  TextArea,
+  SelectSkeleton,
+  Select,
+  SelectItem,
+  NumberInput,
+  Checkbox,
+  InlineLoading,
+  Accordion,
+} from '@carbon/react';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ResponsiveWrapper, closeWorkspace, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import { useProviderConfigTemplates } from '../../hooks/useProviderConfigTemplates';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { type Prop, type ProviderConfiguration } from '../../types';
+import { saveConfig } from '../../api/providers.resource';
+import { useProviderConfigurations } from '../../hooks/useProviderConfigurations';
+import styles from './provider-config-form.scss';
+
+interface AddProviderConfigProps {
+  providerName?: string;
+  templateName?: string;
+  maxRetries?: number;
+  splitHeader?: string;
+  splitFooter?: string;
+  excludeLastFooter?: boolean;
+  autoScript?: string;
+  props?: Array<Prop>;
+}
+
+const addProviderConfigFormSchema = z.object({
+  providerName: z.string(),
+  templateName: z.string(),
+  maxRetries: z.number(),
+  splitHeader: z.string(),
+  splitFooter: z.string(),
+  excludeLastFooter: z.boolean(),
+  autoScript: z.string().optional(),
+  dynamicFields: z.record(z.string(), z.string()),
+});
+
+type AddProviderConfigFormData = z.infer<typeof addProviderConfigFormSchema>;
+
+const AddProviderConfigForm: React.FC<AddProviderConfigProps> = ({
+  providerName,
+  templateName,
+  excludeLastFooter,
+  splitFooter,
+  splitHeader,
+  maxRetries,
+  autoScript,
+  props,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { mutateConfigs, providerConfigurations } = useProviderConfigurations();
+  const { templates, isLoadingTemplates } = useProviderConfigTemplates();
+
+  const {
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+    formState: { isSubmitting, isDirty },
+  } = useForm<AddProviderConfigFormData>({
+    mode: 'all',
+    resolver: zodResolver(addProviderConfigFormSchema),
+    defaultValues: {
+      providerName: providerName ? providerName : undefined,
+      templateName: templateName ? templateName : undefined,
+      maxRetries: maxRetries ? maxRetries : 0,
+      splitHeader: splitHeader ? splitHeader : undefined,
+      splitFooter: splitFooter ? splitFooter : undefined,
+      excludeLastFooter: excludeLastFooter ? excludeLastFooter : false,
+      autoScript: autoScript ? autoScript : undefined,
+    },
+  });
+
+  const onSubmit = async (data: AddProviderConfigFormData) => {
+    if (!isDirty) {
+      return closeForm();
+    }
+    const props = Object.entries(data.dynamicFields).map(([key, value]) => ({ name: key, value: value }));
+    const { providerName, dynamicFields, ...rest } = data;
+    const payload = {
+      ...rest,
+      props,
+      name: providerName,
+    };
+
+    await saveConfig([...providerConfigurations, payload as ProviderConfiguration])
+      .then(() => {
+        showSnackbar({
+          title: t('configSaved', 'Configuration saved'),
+          kind: 'success',
+        });
+        mutateConfigs();
+        closeForm();
+      })
+      .catch(() =>
+        showSnackbar({
+          title: t('configNotSaved', 'Configuration not saved'),
+          kind: 'error',
+        }),
+      );
+  };
+
+  const selectedTemplate = templates?.[watch('templateName')] ?? null;
+
+  const closeForm = () => closeWorkspace('add-provider-config-form');
+
+  useEffect(() => {
+    if (props) {
+      props.forEach(({ name, value }) => {
+        setValue(`dynamicFields.${name}`, value);
+      });
+    }
+  }, [props, setValue]);
+
+  return (
+    <Form data-testid="add-provider-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('providerName', ' Provider Name')}</span>
+          </Column>
+          <Column sm={3}>
+            <ResponsiveWrapper>
+              <Controller
+                name="providerName"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <TextInput
+                    {...field}
+                    data-testid="provider-name"
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    labelText={t('nameOfProvider', 'Name of the provider')}
+                    placeholder={t('namePlaceHolder', 'Enter provider name e.g Twilio')}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <Column sm={1}>
+            <span className={styles.columnLabel}>{t('template', 'Template')}</span>
+          </Column>
+          <Column sm={3}>
+            <ResponsiveWrapper>
+              {isLoadingTemplates ? (
+                <SelectSkeleton />
+              ) : (
+                <Controller
+                  name="templateName"
+                  control={control}
+                  render={({ field, fieldState: { error } }) => (
+                    <Select
+                      {...field}
+                      data-testid="select-template"
+                      labelText={t('selectTemplate', 'Select a template')}
+                      invalid={!!error?.message}
+                      invalidText={error?.message}
+                    >
+                      <SelectItem value={''} text={t('chooseTemplate', 'Choose a template')} />
+                      {Object.keys(templates).map((value) => (
+                        <SelectItem value={value} text={value} />
+                      ))}
+                    </Select>
+                  )}
+                />
+              )}
+            </ResponsiveWrapper>
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <Column sm={1}>
+            <span className={styles.columnLabel}>{t('maximumRetries', 'Maximum retries')}</span>
+          </Column>
+          <Column sm={3}>
+            <ResponsiveWrapper>
+              <Controller
+                name="maxRetries"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <NumberInput
+                    {...field}
+                    data-testid="numberOfRetries"
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    onChange={(_, { value }) => field.onChange(Number(value))}
+                    labelText={t('numberOfRetries', 'Number of retries')}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <Column sm={1}>
+            <span className={styles.columnLabel}>{t('headerSplitMessage', 'Header split message')}</span>
+          </Column>
+          <Column sm={3}>
+            <ResponsiveWrapper>
+              <Controller
+                name="splitHeader"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <TextInput
+                    data-testid="split-header"
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    {...field}
+                    labelText={t('headerSplitText', 'Header split text')}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <Column sm={1}>
+            <span className={styles.columnLabel}>{t('footerSplitMessage', 'Footer split message')}</span>
+          </Column>
+          <Column sm={3}>
+            <ResponsiveWrapper>
+              <Controller
+                name="splitFooter"
+                control={control}
+                render={({ field, fieldState: { error } }) => (
+                  <TextInput
+                    {...field}
+                    data-testid="split-footer"
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    labelText={t('footerSplitText', 'Footers split text')}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <Column sm={3}>
+            <ResponsiveWrapper>
+              <Controller
+                name="excludeLastFooter"
+                control={control}
+                render={({ field }) => (
+                  <Checkbox
+                    data-testid="exclude-last-footer"
+                    id={field.name}
+                    name={field.name}
+                    checked={field.value}
+                    onChange={(_, { checked }) => setValue('excludeLastFooter', checked)}
+                    onBlur={field.onBlur}
+                    className={styles.checkBox}
+                    labelText={t('excludeLastFooter', 'Exclude footer from last split message')}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+          </Column>
+        </Row>
+        <Row className={styles.row}>
+          <Accordion>
+            <AccordionItem title={t('advanced', 'Advanced')}>
+              <Column sm={1}>
+                <span className={styles.columnLabel}>
+                  {t('automaticResponseScript', 'Automatic response script (Optional)')}
+                </span>
+              </Column>
+              <Column sm={3}>
+                <ResponsiveWrapper>
+                  <Controller
+                    name="autoScript"
+                    control={control}
+                    render={({ field, fieldState: { error } }) => (
+                      <TextArea
+                        {...field}
+                        data-testid="auto-script"
+                        invalid={!!error?.message}
+                        invalidText={error?.message}
+                        labelText={t('writeYourScript', 'Write your script')}
+                        placeholder={t('enterAutomaticScript', 'Enter your script')}
+                      />
+                    )}
+                  />
+                </ResponsiveWrapper>
+              </Column>
+            </AccordionItem>
+          </Accordion>
+        </Row>
+        {(() => {
+          if (selectedTemplate) {
+            return selectedTemplate.configurables.map((dataField, index) => (
+              <Row className={styles.dynamicRow} key={index}>
+                <ResponsiveWrapper>
+                  <Controller
+                    name={`dynamicFields.${dataField}`}
+                    control={control}
+                    render={({ field, fieldState: { error } }) => (
+                      <TextInput
+                        {...field}
+                        invalid={!!error?.message}
+                        invalidText={error?.message}
+                        labelText={dataField}
+                        data-testid={dataField}
+                      />
+                    )}
+                  />
+                </ResponsiveWrapper>
+              </Row>
+            ));
+          }
+        })()}
+      </Stack>
+      <ButtonSet className={classnames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+        <Button className={styles.button} kind="secondary" onClick={closeForm}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" disabled={isSubmitting} type="submit">
+          {isSubmitting ? (
+            <InlineLoading description={t('sending', 'Sending') + '...'} />
+          ) : (
+            <span>{t('saveAndClose', 'Save and close')}</span>
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default AddProviderConfigForm;

package/src/providers/empty-state/empty-data-illustration.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
+      </g>
+    </svg>
+  );
+};

package/src/providers/empty-state/empty-state.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Layer, Link, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { EmptyDataIllustration } from './empty-data-illustration.component';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './empty-state.scss';
+import { Button } from '@carbon/react';
+
+export interface EmptyStateProps {
+  displayText: string;
+  headerTitle: string;
+  launchForm?(): void;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = (props) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <Layer>
+      <Tile className={styles.tile}>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{props.headerTitle}</h4>
+        </div>
+        <EmptyDataIllustration />
+        <p className={styles.content}>
+          {t('emptyTableStateText', 'There are no {{displayText}} to display', {
+            displayText: props.displayText.toLowerCase(),
+          })}
+        </p>
+        <p className={styles.action}>
+          {props.launchForm && (
+            <Button onClick={() => props.launchForm()} kind="ghost" size={isTablet ? 'lg' : 'sm'}>
+              {t('record', 'Record')} {props.displayText.toLowerCase()}
+            </Button>
+          )}
+        </p>
+      </Tile>
+    </Layer>
+  );
+};

package/src/providers/empty-state/empty-state.scss

@@ -0,0 +1,55 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.action {
+  margin-bottom: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style("heading-compact-01");
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading, .tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}

package/src/providers/modals/config-upload.modal.tsx

@@ -0,0 +1,170 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  FileUploaderDropContainer,
+  InlineNotification,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Form,
+  Stack,
+  TextArea,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { DocumentUnknown } from '@carbon/react/icons';
+import { uploadConfigTemplate } from '../../api/providers.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import styles from './config-upload.scss';
+
+interface ErrorNotification {
+  title: string;
+  subtitle: string;
+}
+
+interface ConfigUploadModalProps {
+  closeModal: () => {};
+  mutateTemplates: () => void;
+}
+
+const ConfigUploadModal: React.FC<ConfigUploadModalProps> = ({ closeModal, mutateTemplates }) => {
+  const { t } = useTranslation();
+
+  // Maximm config file size. Hard coding since we don't expect the file size to go beyond
+  // 1MB. This value should be updated to match the actual maximum file size once needed in the future.
+  const maxFileSize = 1;
+
+  const [errorNotification, setErrorNotification] = useState<ErrorNotification>(null);
+  const [fileToUpload, setFileToUpload] = useState<File>(null);
+
+  const [fileContent, setFileContent] = useState<string | null>(null);
+
+  const upload = useCallback(
+    (files: Array<File>) => {
+      const config = files[0];
+
+      if (config.size > maxFileSize * 1024 * 1024) {
+        return setErrorNotification({
+          title: t('fileSizeLimitExceededText', 'File size limit exceeded'),
+          subtitle: `The file "${config.name}" ${t(
+            'fileSizeLimitExceeded',
+            'exceeds the size limit of',
+          )} ${maxFileSize} MB.`,
+        });
+      } else {
+        setFileToUpload(config);
+      }
+    },
+    [maxFileSize, t],
+  );
+  const onCancel = useCallback(() => {
+    setFileToUpload(null);
+    setFileContent(null);
+    closeModal();
+  }, [closeModal]);
+
+  useEffect(() => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const result = event.target?.result as string;
+      try {
+        const json = JSON.parse(result);
+        setFileContent(JSON.stringify(json, null, 2));
+      } catch (e) {
+        setFileContent('Invalid JSON file');
+      }
+    };
+    if (fileToUpload) {
+      reader.readAsText(fileToUpload);
+    }
+  }, [fileToUpload]);
+
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (fileToUpload) {
+        return uploadConfigTemplate(fileToUpload)
+          .then(() => {
+            mutateTemplates?.();
+            showSnackbar({
+              title: t('uploadSuccess', 'Upload successful'),
+              kind: 'success',
+            }),
+              closeModal();
+          })
+          .catch(() =>
+            showSnackbar({
+              title: t('uploadNotSuccess', 'Upload unsuccessful'),
+              kind: 'error',
+            }),
+          );
+      }
+    },
+    [closeModal, fileToUpload, mutateTemplates, t],
+  );
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <ModalHeader closeModal={onCancel} title={t('uploadConfig', 'Upload configuration template')} />
+      <ModalBody className={styles.modalBody}>
+        {fileToUpload ? (
+          <>
+            <div className={styles.filePlaceholder}>
+              <DocumentUnknown size={16} />
+            </div>
+            <div className={styles.imageDetails}>
+              <Stack gap={5}>
+                <div className="cds--label">{t('fileName', 'File name')}</div>
+                <h6>{fileToUpload.name}</h6>
+                {fileContent && (
+                  <div className={styles.jsonPreviesw}>
+                    <TextArea labelText={t('fileContent', 'File Content')} value={fileContent} readOnly rows={10} />
+                  </div>
+                )}
+              </Stack>
+            </div>
+          </>
+        ) : (
+          <div className="cds--file__container">
+            {errorNotification && (
+              <div className={styles.errorContainer}>
+                <InlineNotification
+                  aria-label="Upload error notification"
+                  kind="error"
+                  onClose={() => setErrorNotification(null)}
+                  subtitle={errorNotification.subtitle}
+                  title={errorNotification.title}
+                />
+              </div>
+            )}
+            <p className="cds--label-description">
+              {t('fileUploadSizeConstraints', 'Size limit is {{fileSize}}MB', {
+                fileSize: maxFileSize,
+              })}
+              .
+            </p>
+            <div className={styles.uploadFile}>
+              <FileUploaderDropContainer
+                accept={['.json']}
+                labelText={t('fileSizeInstructions', 'Drag and drop files here or click to upload')}
+                tabIndex={0}
+                onAddFiles={(evt, { addedFiles }) => {
+                  upload(addedFiles);
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" size="lg" onClick={onCancel}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" size="lg" disabled={!fileToUpload}>
+          {t('uploadConfig', 'Upload config')}
+        </Button>
+      </ModalFooter>
+    </Form>
+  );
+};
+
+export default ConfigUploadModal;

package/src/providers/modals/config-upload.scss

@@ -0,0 +1,33 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.errorContainer {
+  margin: spacing.$spacing-05 0;
+}
+
+.uploadFile {
+  color: $ui-02;
+  width: 100%;
+  height: 25rem;
+
+  div > button {
+    max-width: 100%;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    height: 25rem;
+    position: relative;
+  }
+
+  label {
+    max-width: unset;
+  }
+
+  label > div {
+    height: 25rem;
+    justify-content: center;
+    align-items: center;
+  }
+}