diff --git a/packages/esm-patient-outcomes-app/src/smsform/common/types.ts b/packages/esm-patient-outcomes-app/src/smsform/common/types.ts index e0682f7..3c476a7 100644 --- a/packages/esm-patient-outcomes-app/src/smsform/common/types.ts +++ b/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 & {}; diff --git a/packages/esm-patient-outcomes-app/src/smsform/send-sms-form.component.tsx b/packages/esm-patient-outcomes-app/src/smsform/send-sms-form.component.tsx index e073881..a133450 100644 --- a/packages/esm-patient-outcomes-app/src/smsform/send-sms-form.component.tsx +++ b/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 = ({ 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 = ({ 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,6 +88,10 @@ const SendSmsForm: React.FC = ({ promptBeforeClosing(() => isDirty); }, [isDirty, promptBeforeClosing, patient]); + useEffect(() => { + methods.setValue('locale', selectedLocale); + }, [selectedLocale, methods]); + const onSubmit = useCallback( (data: SmsFormData, event: any) => { if (!patientUuid) { @@ -65,10 +99,15 @@ const SendSmsForm: React.FC = ({ } 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 = ({ body: body, source: source, patientUuid: patientUuid, + locale: selectedLocale, }; const abortController = new AbortController(); @@ -96,7 +136,7 @@ const SendSmsForm: React.FC = ({ } 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 = ({ }); } }, - [closeWorkspace, isOnline, patientUuid, t], + [closeWorkspace, isOnline, patientUuid, selectedLocale, t], ); return ( @@ -157,6 +197,17 @@ const SendSmsForm: React.FC = ({ inputFieldType="text" inputFieldPlaceholder={t('smsReceiver', 'SMS Recipient phone number')} /> +
+ +
{ render(); 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(); }); diff --git a/packages/esm-patient-outcomes-app/src/smsform/send-sms-input.componet.tsx b/packages/esm-patient-outcomes-app/src/smsform/send-sms-input.component.tsx similarity index 100% rename from packages/esm-patient-outcomes-app/src/smsform/send-sms-input.componet.tsx rename to packages/esm-patient-outcomes-app/src/smsform/send-sms-input.component.tsx diff --git a/packages/esm-patient-outcomes-app/translations/en.json b/packages/esm-patient-outcomes-app/translations/en.json index 749df82..9c6fdf4 100644 --- a/packages/esm-patient-outcomes-app/translations/en.json +++ b/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" }