TP-1200: experimental extension (#205)

* feat(extension): experimental extension

* chore(css): some tweaks

---------

Co-authored-by: Nick Hellemans <[email protected]>

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

src/components/Extension/ExperimentalExtension/ExperimentalExtension.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react'
+import { useTranslation } from 'next-i18next'
+
+import { ErrorPage } from '../../ErrorPage'
+import { RequestVideoVisit } from './actions'
+
+import { ActionKey } from './types'
+import type { ExtensionActivityRecord } from '../types'
+
+interface ExperimentalExtensionProps {
+  activityDetails: ExtensionActivityRecord
+}
+
+export const ExperimentalExtension: FC<ExperimentalExtensionProps> = ({
+  activityDetails,
+}) => {
+  const { t } = useTranslation()
+
+  switch (activityDetails.plugin_action_key) {
+    case ActionKey.REQUEST_VIDEO_VISIT:
+      return <RequestVideoVisit activityDetails={activityDetails} />
+    default:
+      return <ErrorPage title={t('activities.activity_not_supported')} />
+  }
+}
+
+ExperimentalExtension.displayName = 'ExperimentalExtension'

src/components/Extension/ExperimentalExtension/actions/RequestVideoVisit/RequestVideoVisit.module.css

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* height: 100vh; */
+  width: 70%;
+  margin: 0 auto;
+  text-align: center;
+  gap: 12px;
+  /* @media (max-width: 768px) {
+    padding: 0 20px;
+    width: 100%;
+  } */
+}

src/components/Extension/ExperimentalExtension/actions/RequestVideoVisit/RequestVideoVisit.tsx

@@ -0,0 +1,38 @@
+import React, { FC, useCallback } from 'react'
+import classes from './RequestVideoVisit.module.css'
+
+import type { ExtensionActivityRecord } from '../../../types'
+import { useRequestVideoVisit } from './hooks/useRequestVideoVisit'
+import { Button } from '@awell-health/ui-library'
+
+interface RequestVideoVisitProps {
+  activityDetails: ExtensionActivityRecord
+}
+
+export const RequestVideoVisit: FC<RequestVideoVisitProps> = ({
+  activityDetails,
+}) => {
+  const { activity_id } = activityDetails
+  const { onSubmit } = useRequestVideoVisit()
+
+  const onClick = useCallback(
+    (requestVideoVisit: boolean) => {
+      onSubmit({ activityId: activity_id, requestVideoVisit })
+    },
+    [activity_id, onSubmit]
+  )
+
+  return (
+    <div>
+      <div className={classes.container}>
+        <p>Whatever content we want here and full control over UI</p>
+      </div>
+      <div className={classes.container}>
+        <Button onClick={() => onClick(false)}>Continue</Button>
+        <Button onClick={() => onClick(true)}>Request video visit</Button>
+      </div>
+    </div>
+  )
+}
+
+RequestVideoVisit.displayName = 'RequestVideoVisit'

src/components/Extension/ExperimentalExtension/actions/RequestVideoVisit/hooks/useRequestVideoVisit.tsx

@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+import { DataPoints, useCompleteExtensionActivity } from '../../../types'
+
+export const useRequestVideoVisit = () => {
+  const { isSubmitting, onSubmit: _onSubmit } = useCompleteExtensionActivity()
+
+  const onSubmit = useCallback(
+    async ({
+      activityId,
+      requestVideoVisit,
+    }: {
+      activityId: string
+      requestVideoVisit: boolean
+    }) => {
+      const dataPoints: DataPoints = [
+        { key: 'requestVideoVisit', value: String(requestVideoVisit) },
+      ]
+
+      return _onSubmit(activityId, dataPoints)
+    },
+    [_onSubmit]
+  )
+
+  return {
+    isSubmitting,
+    onSubmit,
+  }
+}

src/components/Extension/ExperimentalExtension/actions/RequestVideoVisit/index.tsx

@@ -0,0 +1 @@
+export { RequestVideoVisit } from './RequestVideoVisit'

src/components/Extension/ExperimentalExtension/actions/index.ts

@@ -0,0 +1 @@
+export { RequestVideoVisit } from './RequestVideoVisit'

src/components/Extension/ExperimentalExtension/index.tsx

@@ -0,0 +1 @@
+export { ExperimentalExtension } from './ExperimentalExtension'

src/components/Extension/ExperimentalExtension/types.ts

@@ -0,0 +1,10 @@
+export {
+  type DataPoints,
+  useCompleteExtensionActivity,
+} from '../../../hooks/useCompleteExtensionActivity'
+
+export enum ActionKey {
+  REQUEST_VIDEO_VISIT = 'requestVideoVisit',
+}
+
+export type RequestVideoVisitActionFields = {}

src/components/Extension/Extension.tsx

@@ -12,6 +12,7 @@ import { DropboxSignExtension } from './DropboxSignExtension'
 import { CloudinaryExtension } from './CloudinaryExtension'
 import { DocuSignExtension } from './DocuSignExtension'
 import { CollectDataExtension } from './CollectDataExtension'
+import { ExperimentalExtension } from './ExperimentalExtension'
 
 interface ExtensionProps {
   activity: Activity
@@ -48,6 +49,10 @@ export const Extension: FC<ExtensionProps> = ({ activity }) => {
       return <DocuSignExtension activityDetails={extensionActivityDetails} />
     case ExtensionKey.COLLECT_DATA:
       return <CollectDataExtension activityDetails={extensionActivityDetails} />
+    case ExtensionKey.EXPERIMENTAL:
+      return (
+        <ExperimentalExtension activityDetails={extensionActivityDetails} />
+      )
     default:
       return <ErrorPage title={t('activities.activity_not_supported')} />
   }

src/components/Extension/types.ts

@@ -14,4 +14,5 @@ export enum ExtensionKey {
   CLOUDINARY = 'cloudinary',
   DOCU_SIGN = 'docuSign',
   COLLECT_DATA = 'collectData',
+  EXPERIMENTAL = 'experimental',
 }