From 3aa224f1db08a659fee18da57e7a53292e2af65c Mon Sep 17 00:00:00 2001
From: mohsinht <mohsinhayat104@gmail.com>
Date: Wed, 18 Sep 2024 20:16:58 +0500
Subject: [PATCH] feat(extensions): add support for ReviewMedicationExtraction
 action

---
 src/components/Extension/Extension.tsx        |   3 +
 .../ShellyExtension/ShellyExtension.tsx       |  27 +++
 .../ReviewMedicationExtraction.module.css     |  52 ++++++
 .../ReviewMedicationExtraction.tsx            | 157 ++++++++++++++++++
 .../hooks/useReviewMedicationExtraction.tsx   |  28 ++++
 .../ReviewMedicationExtraction/index.tsx      |   1 +
 .../ReviewMedicationExtraction/types.ts       |   8 +
 .../ShellyExtension/actions/index.ts          |   1 +
 .../Extension/ShellyExtension/index.ts        |   1 +
 .../Extension/ShellyExtension/types.ts        |  19 +++
 src/components/Extension/types.ts             |   1 +
 11 files changed, 298 insertions(+)
 create mode 100644 src/components/Extension/ShellyExtension/ShellyExtension.tsx
 create mode 100644 src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/ReviewMedicationExtraction.module.css
 create mode 100644 src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/ReviewMedicationExtraction.tsx
 create mode 100644 src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/hooks/useReviewMedicationExtraction.tsx
 create mode 100644 src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/index.tsx
 create mode 100644 src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/types.ts
 create mode 100644 src/components/Extension/ShellyExtension/actions/index.ts
 create mode 100644 src/components/Extension/ShellyExtension/index.ts
 create mode 100644 src/components/Extension/ShellyExtension/types.ts

diff --git a/src/components/Extension/Extension.tsx b/src/components/Extension/Extension.tsx
index 5ae03eb1..1cc91e7d 100644
--- a/src/components/Extension/Extension.tsx
+++ b/src/components/Extension/Extension.tsx
@@ -21,6 +21,7 @@ import {
 } from './PrivateExtensions/actions'
 import { StripeExtension } from './StripeExtension'
 import { IdentityVerification } from './IdentityVerification'
+import { ShellyExtension } from './ShellyExtension'
 
 interface ExtensionProps {
   activity: Activity
@@ -89,6 +90,8 @@ export const Extension: FC<ExtensionProps> = ({ activity }) => {
       return (
         <ExperimentalExtension activityDetails={extensionActivityDetails} />
       )
+    case ExtensionKey.SHELLY:
+      return <ShellyExtension activityDetails={extensionActivityDetails} />
     default:
       return getDefaultReturnValue()
   }
diff --git a/src/components/Extension/ShellyExtension/ShellyExtension.tsx b/src/components/Extension/ShellyExtension/ShellyExtension.tsx
new file mode 100644
index 00000000..5d0b0746
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/ShellyExtension.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from 'react'
+import { useTranslation } from 'next-i18next'
+
+import { ErrorPage } from '../../ErrorPage'
+import { ReviewMedicationExtraction } from './actions'
+
+import { ActionKey } from './types'
+import type { ExtensionActivityRecord } from '../types'
+
+interface ShellyExtensionProps {
+  activityDetails: ExtensionActivityRecord
+}
+
+export const ShellyExtension: FC<ShellyExtensionProps> = ({
+  activityDetails,
+}) => {
+  const { t } = useTranslation()
+
+  switch (activityDetails.plugin_action_key) {
+    case ActionKey.REVIEW_MEDICATION_EXTRACTION:
+      return <ReviewMedicationExtraction activityDetails={activityDetails} />
+    default:
+      return <ErrorPage title={t('activities.activity_not_supported')} />
+  }
+}
+
+ShellyExtension.displayName = 'ShellyExtension'
diff --git a/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/ReviewMedicationExtraction.module.css b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/ReviewMedicationExtraction.module.css
new file mode 100644
index 00000000..46098584
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/ReviewMedicationExtraction.module.css
@@ -0,0 +1,52 @@
+.container {
+  max-width: 95%;
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 850px;
+  }
+}
+
+.groupMedsListContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  gap: 12px;
+}
+
+.singleMedsListContainer {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  text-align: left;
+  width: 100%;
+  gap: 12px;
+}
+
+.label {
+  text-align: left;
+}
+
+.singleMedsListContainer:not(:first-child) label {
+  display: none;
+}
+
+.singleMedsListContainer > div {
+  width: 100%;
+}
+
+.addMedsButton {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.submitButton {
+  margin-top: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/ReviewMedicationExtraction.tsx b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/ReviewMedicationExtraction.tsx
new file mode 100644
index 00000000..66511b0c
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/ReviewMedicationExtraction.tsx
@@ -0,0 +1,157 @@
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import classes from './ReviewMedicationExtraction.module.css'
+import activityClasses from '../../../../../../styles/ActivityLayout.module.css'
+
+import type { ExtensionActivityRecord } from '../../../types'
+import { useReviewMedicationExtraction } from './hooks/useReviewMedicationExtraction'
+import {
+  Button,
+  HostedPageFooter,
+  InputField,
+  QuestionLabel,
+  useTheme,
+} from '@awell-health/ui-library'
+import { isEmpty } from 'lodash'
+import { mapActionFieldsToObject } from '../../../utils'
+import { ActionFields } from './types'
+
+interface ReviewMedicationExtractionProps {
+  activityDetails: ExtensionActivityRecord
+}
+
+type Medication = {
+  name: string
+  dose: string
+  instructions?: string
+}
+
+export const ReviewMedicationExtraction: FC<
+  ReviewMedicationExtractionProps
+> = ({ activityDetails }) => {
+  const [medications, setMedications] = useState<Medication[]>([])
+  const { activity_id, fields } = activityDetails
+  const { updateLayoutMode, resetLayoutMode } = useTheme()
+  const { onSubmit } = useReviewMedicationExtraction()
+
+  const { questionLabel } = useMemo(
+    () => mapActionFieldsToObject<ActionFields>(fields),
+    [fields]
+  )
+
+  useEffect(() => {
+    updateLayoutMode('flexible')
+
+    return () => {
+      // Reset to default mode on unmount
+      resetLayoutMode()
+    }
+  }, [])
+
+  const handleSubmit = useCallback(() => {
+    const filteredMedications = medications.filter((medication) => {
+      return (
+        !isEmpty(medication.name) ||
+        !isEmpty(medication.dose) ||
+        !isEmpty(medication.instructions)
+      )
+    })
+
+    onSubmit({
+      activityId: activity_id,
+      stringifiedMedication: JSON.stringify(filteredMedications),
+    })
+  }, [activity_id, onSubmit, medications])
+
+  const addMedication = () => {
+    setMedications([...medications, { name: '', dose: '', instructions: '' }])
+  }
+
+  const updateMedication = (
+    index: number,
+    field: keyof Medication,
+    value: string
+  ) => {
+    const newMedications = [...medications]
+    newMedications[index] = { ...newMedications[index], [field]: value }
+    setMedications(newMedications)
+  }
+
+  const removeMedication = (index: number) => {
+    setMedications(medications.filter((_, i) => i !== index))
+  }
+
+  return (
+    <>
+      <main
+        id="ahp_main_content_with_scroll_hint"
+        className={activityClasses.main_content}
+      >
+        <div
+          className={`${classes.container} ${classes.groupMedsListContainer}`}
+        >
+          {!questionLabel && (
+            <div className={classes.label}>
+              <QuestionLabel label="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." />
+            </div>
+          )}
+          {medications.map((medication, index) => (
+            <div className={classes.singleMedsListContainer} key={index}>
+              <InputField
+                id="name"
+                label="Name"
+                type="text"
+                value={medication.name}
+                onChange={(e) =>
+                  updateMedication(index, 'name', e.target.value)
+                }
+                placeholder="Medication Name"
+              />
+              <InputField
+                id="dose"
+                label="Dose"
+                type="text"
+                value={medication.dose}
+                onChange={(e) =>
+                  updateMedication(index, 'dose', e.target.value)
+                }
+                placeholder="Dose"
+              />
+              <InputField
+                id="instructions"
+                label="Instructions"
+                type="text"
+                value={medication.instructions || ''}
+                onChange={(e) =>
+                  updateMedication(index, 'instructions', e.target.value)
+                }
+                placeholder="Instructions"
+              />
+              <Button
+                variant="tertiary"
+                onClick={() => removeMedication(index)}
+              >
+                X
+              </Button>
+            </div>
+          ))}
+        </div>
+        <div className={`${classes.container} ${classes.addMedsButton}`}>
+          <Button onClick={addMedication} variant="secondary">
+            Add Medication
+          </Button>
+        </div>
+      </main>
+      <HostedPageFooter showScrollHint={false}>
+        <div
+          className={`${activityClasses.button_wrapper} ${classes.container}`}
+        >
+          <Button variant="primary" onClick={handleSubmit}>
+            Next
+          </Button>
+        </div>
+      </HostedPageFooter>
+    </>
+  )
+}
+
+ReviewMedicationExtraction.displayName = 'ReviewMedicationExtraction'
diff --git a/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/hooks/useReviewMedicationExtraction.tsx b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/hooks/useReviewMedicationExtraction.tsx
new file mode 100644
index 00000000..afa6f719
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/hooks/useReviewMedicationExtraction.tsx
@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+import { DataPoints, useCompleteExtensionActivity } from '../types'
+
+export const useReviewMedicationExtraction = () => {
+  const { isSubmitting, onSubmit: _onSubmit } = useCompleteExtensionActivity()
+
+  const onSubmit = useCallback(
+    async ({
+      activityId,
+      stringifiedMedication,
+    }: {
+      activityId: string
+      stringifiedMedication: string
+    }) => {
+      const dataPoints: DataPoints = [
+        { key: 'stringifiedMedicationData', value: stringifiedMedication },
+      ]
+
+      return _onSubmit(activityId, dataPoints)
+    },
+    [_onSubmit]
+  )
+
+  return {
+    isSubmitting,
+    onSubmit,
+  }
+}
diff --git a/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/index.tsx b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/index.tsx
new file mode 100644
index 00000000..07713757
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/index.tsx
@@ -0,0 +1 @@
+export { ReviewMedicationExtraction } from './ReviewMedicationExtraction'
diff --git a/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/types.ts b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/types.ts
new file mode 100644
index 00000000..4d7810ae
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/actions/ReviewMedicationExtraction/types.ts
@@ -0,0 +1,8 @@
+export {
+  type DataPoints,
+  useCompleteExtensionActivity,
+} from '../../../../../hooks/useCompleteExtensionActivity'
+
+export type ActionFields = {
+  questionLabel?: string
+}
diff --git a/src/components/Extension/ShellyExtension/actions/index.ts b/src/components/Extension/ShellyExtension/actions/index.ts
new file mode 100644
index 00000000..07713757
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/actions/index.ts
@@ -0,0 +1 @@
+export { ReviewMedicationExtraction } from './ReviewMedicationExtraction'
diff --git a/src/components/Extension/ShellyExtension/index.ts b/src/components/Extension/ShellyExtension/index.ts
new file mode 100644
index 00000000..7b4d8310
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/index.ts
@@ -0,0 +1 @@
+export { ShellyExtension } from './ShellyExtension'
diff --git a/src/components/Extension/ShellyExtension/types.ts b/src/components/Extension/ShellyExtension/types.ts
new file mode 100644
index 00000000..fddd7762
--- /dev/null
+++ b/src/components/Extension/ShellyExtension/types.ts
@@ -0,0 +1,19 @@
+export {
+  type DataPoints,
+  useCompleteExtensionActivity,
+} from '../../../hooks/useCompleteExtensionActivity'
+
+export type ShellyExtensionSettings = {
+  apiKey?: string
+  environment: 'production' | 'staging'
+}
+
+export enum ActionKey {
+  REVIEW_MEDICATION_EXTRACTION = 'reviewMedicationExtraction',
+}
+
+export type CompleteFlowFields = {
+  clientLabel: string
+  flowLabel: string
+  variantLabel?: string
+}
diff --git a/src/components/Extension/types.ts b/src/components/Extension/types.ts
index 3e9b3e7e..4b2633c1 100644
--- a/src/components/Extension/types.ts
+++ b/src/components/Extension/types.ts
@@ -17,6 +17,7 @@ export enum ExtensionKey {
   EXPERIMENTAL = 'experimental',
   STRIPE = 'stripe',
   IDENTITY_VERIFICATION = 'identityVerification',
+  SHELLY = 'shelly',
 }
 
 /**