SSGSO-7: Configure PRO form language (#3)

* SSGSO-7: Configure PRO form language

* Address comments

* Fix failing test

packages/esm-patient-outcomes-app/src/smsform/common/types.ts

@@ -4,6 +4,7 @@ export type SmsFormData = {
   body: string;
   source: string;
   patientUuid: string;
+  locale: string;
 };
 
 export type UpdateSmsPayload = SmsFormData & {};

packages/esm-patient-outcomes-app/src/smsform/send-sms-form.component.tsx

@@ -1,18 +1,35 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { Button, ButtonSet, Form, InlineLoading, InlineNotification, Row, Stack } from '@carbon/react';
+import {
+  Button,
+  ButtonSet,
+  Form,
+  InlineLoading,
+  InlineNotification,
+  Row,
+  Stack,
+  Select,
+  SelectItem,
+} from '@carbon/react';
 import { v4 as uuid } from 'uuid';
 import { FormProvider, useForm } from 'react-hook-form';
 import { first } from 'rxjs/operators';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { ExtensionSlot, showSnackbar, useConnectivity, useLayoutType, usePatient } from '@openmrs/esm-framework';
+import {
+  ExtensionSlot,
+  showSnackbar,
+  useConnectivity,
+  useLayoutType,
+  usePatient,
+  useSession,
+} from '@openmrs/esm-framework';
 import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import { type SmsFormData } from './common/types';
-import styles from './send-sms-form.scss';
 import { saveQuestionnaire } from './common';
-import SendSmsField from './send-sms-input.componet';
+import SendSmsField from './send-sms-input.component';
+import styles from './send-sms-form.scss';
 
 interface SendSmsFormProps extends DefaultPatientWorkspaceProps {
   showPatientHeader?: boolean;
@@ -27,8 +44,20 @@ const SendSmsForm: React.FC<SendSmsFormProps> = ({
   const isTablet = useLayoutType() === 'tablet';
   const isOnline = useConnectivity();
   const { patientUuid, patient } = usePatient();
+  const { locale, allowedLocales } = useSession();
   const visitHeaderSlotState = useMemo(() => ({ patientUuid }), [patientUuid]);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedLocale, setSelectedLocale] = useState(locale);
+  const languageNames = useMemo(
+    () =>
+      Object.fromEntries(
+        (allowedLocales ?? []).map((locale) => [
+          locale,
+          new Intl.DisplayNames([locale], { type: 'language' }).of(locale),
+        ]),
+      ),
+    [allowedLocales],
+  );
 
   const [errorFetchingResources] = useState<{
     blockSavingForm: boolean;
@@ -38,6 +67,7 @@ const SendSmsForm: React.FC<SendSmsFormProps> = ({
     const phoneValidation = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
     return z.object({
       to: z.string().regex(phoneValidation, { message: 'Invalid phone number' }),
+      locale: z.string().min(1, { message: 'Language selection is required' }),
     });
   }, []);
 
@@ -58,17 +88,26 @@ const SendSmsForm: React.FC<SendSmsFormProps> = ({
     promptBeforeClosing(() => isDirty);
   }, [isDirty, promptBeforeClosing, patient]);
 
+  useEffect(() => {
+    methods.setValue('locale', selectedLocale);
+  }, [selectedLocale, methods]);
+
   const onSubmit = useCallback(
     (data: SmsFormData, event: any) => {
       if (!patientUuid) {
         return;
       }
 
       setIsSubmitting(true);
-
       const { to } = data;
+
       const guid = uuid();
-      const body = window.location.host.concat(`/outcomes?pid=${guid}`);
+      const url = new URL(window.location.origin);
+      const params = new URLSearchParams({ pid: guid, locale: selectedLocale });
+      url.pathname = '/outcomes';
+      url.search = params.toString();
+      const body = url.toString();
+
       const source = window.location.host;
 
       let payload: SmsFormData = {
@@ -77,6 +116,7 @@ const SendSmsForm: React.FC<SendSmsFormProps> = ({
         body: body,
         source: source,
         patientUuid: patientUuid,
+        locale: selectedLocale,
       };
 
       const abortController = new AbortController();
@@ -96,7 +136,7 @@ const SendSmsForm: React.FC<SendSmsFormProps> = ({
               } else {
                 closeWorkspace({ ignoreChanges: true });
                 showSnackbar({
-                  title: t('smsError', 'SMS seding failed'),
+                  title: t('smsError', 'Sending SMS failed'),
                   kind: 'error',
                   isLowContrast: false,
                   subtitle: t('sendSmsError', 'Error sending PRO Questionnaire url (SMS)!!'),
@@ -114,7 +154,7 @@ const SendSmsForm: React.FC<SendSmsFormProps> = ({
         });
       }
     },
-    [closeWorkspace, isOnline, patientUuid, t],
+    [closeWorkspace, isOnline, patientUuid, selectedLocale, t],
   );
 
   return (
@@ -157,6 +197,17 @@ const SendSmsForm: React.FC<SendSmsFormProps> = ({
               inputFieldType="text"
               inputFieldPlaceholder={t('smsReceiver', 'SMS Recipient phone number')}
             />
+            <div>
+              <Select
+                id="language-select"
+                labelText={t('selectLanguage', 'Select Language')}
+                value={selectedLocale}
+                onChange={(event) => setSelectedLocale(event.target.value)}>
+                {allowedLocales?.map((locale, i) => (
+                  <SelectItem key={`locale-option-${locale}-${i}`} value={locale} text={languageNames[locale]} />
+                ))}
+              </Select>
+            </div>
           </Stack>
         </div>
         <ButtonSet

packages/esm-patient-outcomes-app/src/smsform/send-sms-form.test.tsx

@@ -18,6 +18,7 @@ const payload: SmsFormData = {
   body: bodyValue,
   source: sourceValue,
   patientUuid: mockPatient.id,
+  locale: '',
 };
 
 const testProps = {
@@ -36,6 +37,7 @@ describe('SendSmsForm', () => {
     render(<SendSmsForm {...testProps} />);
 
     expect(screen.getByText(/Phone number/i)).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: /Select Language/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Send SMS/i })).toBeInTheDocument();
   });
 

packages/esm-patient-outcomes-app/translations/en.json

@@ -3,11 +3,12 @@
   "partOfFormDidntLoad": "Part of the form did not load",
   "proQuestionnaireUrlSent": "PRO Questionnaire url (SMS) sent to Patient successfully!",
   "refreshToTryAgain": "Please refresh to try again",
+  "selectLanguage": "Select Language",
   "sendingSms": "Sending SMS",
   "sendSMS": "Send PRO SMS",
   "sendSmsError": "Error sending PRO Questionnaire url (SMS)!!",
   "sendSmsInternetError": "Cannot send SMS without Intenet connection!!",
-  "smsError": "SMS seding failed",
+  "smsError": "Sending SMS failed",
   "smsReceiver": "SMS Recipient phone number",
   "smsSent": "SMS sent"
 }