@ampath/esm-login-app 8.0.0-next.2

package/src/location-picker/location-picker-view.component.tsx

@@ -0,0 +1,174 @@
+import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { Button, Checkbox, InlineLoading } from '@carbon/react';
+import { useLocation, type Location, useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  getCoreTranslation,
+  LocationPicker,
+  navigate,
+  setSessionLocation,
+  useConfig,
+  useConnectivity,
+  useSession,
+} from '@openmrs/esm-framework';
+import { useDefaultLocation, useLocationCount } from './location-picker.resource';
+import type { ConfigSchema } from '../config-schema';
+import type { LoginReferrer } from '../login/login.component';
+import styles from './location-picker.scss';
+
+interface LocationPickerProps {
+  hideWelcomeMessage?: boolean;
+  currentLocationUuid?: string;
+}
+
+const LocationPickerView: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, currentLocationUuid }) => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigSchema>();
+  const { chooseLocation } = config;
+  const isLoginEnabled = useConnectivity();
+  const [searchParams] = useSearchParams();
+  const checkboxId = useId();
+  const isUpdateFlow = useMemo(() => searchParams.get('update') === 'true', [searchParams]);
+  const { defaultLocation, updateDefaultLocation, savePreference, setSavePreference } =
+    useDefaultLocation(isUpdateFlow);
+  const {
+    isLoading: isLoadingLocationCount,
+    locationCount,
+    firstLocation,
+  } = useLocationCount(chooseLocation.useLoginLocationTag);
+
+  const { user, sessionLocation } = useSession();
+  const { currentUser, userProperties } = useMemo(
+    () => ({
+      currentUser: user?.display,
+      userProperties: user?.userProperties,
+    }),
+    [user],
+  );
+
+  const [activeLocation, setActiveLocation] = useState(() => {
+    if (currentLocationUuid && hideWelcomeMessage) {
+      return currentLocationUuid;
+    }
+    return sessionLocation?.uuid ?? defaultLocation;
+  });
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { state } = useLocation() as unknown as Omit<Location, 'state'> & {
+    state: LoginReferrer;
+  };
+
+  const changeLocation = useCallback(
+    (locationUuid?: string, saveUserPreference?: boolean) => {
+      setIsSubmitting(true);
+
+      const referrer = state?.referrer;
+      const returnToUrl = searchParams.get('returnToUrl');
+
+      const sessionDefined = setSessionLocation(locationUuid, new AbortController());
+
+      updateDefaultLocation(locationUuid, saveUserPreference);
+      sessionDefined.then(() => {
+        if (referrer && !['/', '/login', '/login/location'].includes(referrer)) {
+          navigate({ to: '${openmrsSpaBase}' + referrer });
+          return;
+        }
+        if (returnToUrl && returnToUrl !== '/') {
+          navigate({ to: returnToUrl });
+        } else {
+          navigate({ to: config.links.loginSuccess });
+        }
+      });
+    },
+    [state?.referrer, config.links.loginSuccess, updateDefaultLocation, searchParams],
+  );
+
+  // Handle cases where the location picker is disabled, there is only one location, or there are no locations.
+  useEffect(() => {
+    if (isLoadingLocationCount) return;
+
+    if (locationCount === 0) {
+      changeLocation();
+    } else if (locationCount === 1 || !chooseLocation.enabled) {
+      if (firstLocation?.resource?.id) {
+        changeLocation(firstLocation.resource.id, true);
+      } else {
+        console.error('Expected location data is missing', { firstLocation, locationCount });
+      }
+    }
+  }, [locationCount, isLoadingLocationCount]);
+
+  // Handle cases where the login location is present in the userProperties.
+  useEffect(() => {
+    if (isUpdateFlow) {
+      return;
+    }
+    if (defaultLocation && !isSubmitting) {
+      setActiveLocation(defaultLocation);
+      changeLocation(defaultLocation, true);
+    }
+  }, [changeLocation, isSubmitting, defaultLocation, isUpdateFlow]);
+
+  const handleSubmit = useCallback(
+    (evt: React.FormEvent<HTMLFormElement>) => {
+      evt.preventDefault();
+
+      if (!activeLocation) {
+        return;
+      }
+
+      changeLocation(activeLocation, savePreference);
+    },
+    [activeLocation, changeLocation, savePreference],
+  );
+
+  return (
+    <div className={styles.locationPickerContainer}>
+      <form onSubmit={handleSubmit}>
+        <div className={styles.locationCard}>
+          <div className={styles.paddedContainer}>
+            <p className={styles.welcomeTitle}>
+              {t('welcome', 'Welcome')} {currentUser}
+            </p>
+            <p className={styles.welcomeMessage}>
+              {t(
+                'selectYourLocation',
+                'Select your location from the list below. Use the search bar to find your location.',
+              )}
+            </p>
+          </div>
+          <LocationPicker
+            selectedLocationUuid={activeLocation}
+            defaultLocationUuid={userProperties.defaultLocation}
+            locationTag={chooseLocation.useLoginLocationTag && 'Login Location'}
+            onChange={(locationUuid) => setActiveLocation(locationUuid)}
+          />
+          <div className={styles.footerContainer}>
+            <Checkbox
+              className={styles.savePreferenceCheckbox}
+              checked={savePreference}
+              id={checkboxId}
+              labelText={t('rememberLocationForFutureLogins', 'Remember my location for future logins')}
+              onChange={(_, { checked }) => setSavePreference(checked)}
+            />
+            <Button
+              className={styles.confirmButton}
+              kind="primary"
+              type="submit"
+              disabled={!activeLocation || !isLoginEnabled || isSubmitting}
+            >
+              {isSubmitting ? (
+                <InlineLoading className={styles.loader} description={t('submitting', 'Submitting')} />
+              ) : (
+                <span>{getCoreTranslation('confirm')}</span>
+              )}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default LocationPickerView;

package/src/location-picker/location-picker.resource.ts

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSwrImmutable from 'swr/immutable';
+import { type FetchResponse, openmrsFetch, setUserProperties, showSnackbar, useSession } from '@openmrs/esm-framework';
+import { useValidateLocationUuid } from '../login.resource';
+import { type LocationResponse } from '../types';
+
+export function useDefaultLocation(isUpdateFlow: boolean) {
+  const { t } = useTranslation();
+  const { user } = useSession();
+  const { userUuid, userProperties } = useMemo(
+    () => ({
+      userUuid: user?.uuid,
+      userProperties: user?.userProperties,
+    }),
+    [user],
+  );
+  const [savePreference, setSavePreference] = useState(false);
+
+  const defaultLocation = useMemo(() => userProperties?.defaultLocation, [userProperties?.defaultLocation]);
+
+  const { isLocationValid, defaultLocation: defaultLocationFhir } = useValidateLocationUuid(defaultLocation);
+
+  useEffect(() => {
+    if (defaultLocation) {
+      setSavePreference(true);
+    }
+  }, [setSavePreference, defaultLocation]);
+
+  const updateUserPropsWithDefaultLocation = useCallback(
+    async (locationUuid: string, saveDefaultLocation: boolean) => {
+      if (saveDefaultLocation) {
+        // If the user checks the checkbox for saving the preference
+        const updatedUserProperties = {
+          ...userProperties,
+          defaultLocation: locationUuid,
+        };
+        await setUserProperties(userUuid, updatedUserProperties);
+      } else if (!!userProperties?.defaultLocation) {
+        // If the user doesn't want to save the preference,
+        // the old preference should be deleted
+        const updatedUserProperties = { ...userProperties };
+        delete updatedUserProperties.defaultLocation;
+        await setUserProperties(userUuid, updatedUserProperties);
+      }
+    },
+    [userProperties, userUuid],
+  );
+
+  const updateDefaultLocation = useCallback(
+    async (locationUuid: string, saveDefaultLocation: boolean) => {
+      if (savePreference && locationUuid === defaultLocation) {
+        return;
+      }
+
+      updateUserPropsWithDefaultLocation(locationUuid, saveDefaultLocation).then(() => {
+        if (saveDefaultLocation) {
+          showSnackbar({
+            title: !isUpdateFlow ? t('locationSaved', 'Location saved') : t('locationUpdated', 'Location updated'),
+            subtitle: !isUpdateFlow
+              ? t('locationSaveMessage', 'Your preferred location has been saved for future logins')
+              : t('locationUpdateMessage', 'Your preferred login location has been updated'),
+            kind: 'success',
+            isLowContrast: true,
+          });
+        } else if (defaultLocation) {
+          showSnackbar({
+            title: t('locationPreferenceRemoved', 'Location preference removed'),
+            subtitle: t('locationPreferenceRemovedMessage', 'You will need to select a location on each login'),
+            kind: 'success',
+            isLowContrast: true,
+          });
+        }
+      });
+    },
+    [savePreference, defaultLocation, updateUserPropsWithDefaultLocation, t, isUpdateFlow],
+  );
+
+  return {
+    defaultLocationFhir,
+    defaultLocation: isLocationValid ? defaultLocation : null,
+    updateDefaultLocation,
+    savePreference,
+    setSavePreference,
+  };
+}
+
+export function useLocationCount(useLoginLocationTag: boolean) {
+  const url = `/ws/fhir2/R4/Location?_count=1`;
+  if (useLoginLocationTag) {
+    url.concat(`&tag=Login Location`);
+  }
+  const { data, error, isLoading } = useSwrImmutable<FetchResponse<LocationResponse>>(url, openmrsFetch, {
+    shouldRetryOnError(err) {
+      if (err?.response?.status) {
+        return err.response.status >= 500;
+      }
+      return false;
+    },
+  });
+
+  return useMemo(
+    () => ({
+      locationCount: data?.data?.total,
+      firstLocation: data?.data?.entry ? data.data.entry[0] : null,
+      error,
+      isLoading,
+    }),
+    [data, isLoading, error],
+  );
+}

package/src/location-picker/location-picker.scss

@@ -0,0 +1,94 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.productiveHeading03 {
+  @include type.type-style('heading-03');
+}
+
+.backButton {
+  height: layout.$spacing-09;
+  padding-left: 0;
+
+  svg {
+    margin-right: layout.$spacing-03;
+    order: 1;
+  }
+
+  span {
+    order: 2;
+  }
+}
+
+.locationPickerContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+}
+
+.paddedContainer {
+  padding: layout.$spacing-06 layout.$spacing-06 layout.$spacing-05;
+}
+
+.locationCard {
+  display: flex;
+  flex-direction: column;
+  width: 23rem;
+  background-color: $ui-02;
+  margin: 0;
+  border: 1px solid $ui-03;
+}
+
+.welcomeTitle {
+  @extend .productiveHeading03;
+  text-transform: capitalize;
+}
+
+.welcomeMessage {
+  @extend .bodyLong01;
+  margin-top: layout.$spacing-03;
+  color: $color-gray-70;
+}
+
+.footerContainer {
+  padding: layout.$spacing-05 layout.$spacing-06 layout.$spacing-06;
+
+  .savePreferenceCheckbox {
+    padding-bottom: layout.$spacing-05 !important;
+  }
+
+  .confirmButton {
+    width: 100%;
+  }
+}
+
+.cancelButton {
+  margin-top: layout.$spacing-02;
+}
+
+.loadingContainer {
+  margin-top: layout.$spacing-06;
+}
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: layout.$spacing-06 auto 0;
+}
+
+.loader {
+  min-height: fit-content;
+}
+
+.errorNotification {
+  margin-inline-start: -(layout.$spacing-06);
+  margin-inline-end: -(layout.$spacing-06);
+}