diff --git a/packages/client/src/components/form/FormFieldGenerator.tsx b/packages/client/src/components/form/FormFieldGenerator.tsx index 384c9f62b4..66b6f30815 100644 --- a/packages/client/src/components/form/FormFieldGenerator.tsx +++ b/packages/client/src/components/form/FormFieldGenerator.tsx @@ -612,9 +612,12 @@ const GeneratedInputField = React.memo( if (fieldDefinition.type === REDIRECT) { return ( ) } diff --git a/packages/client/src/components/form/Redirect.tsx b/packages/client/src/components/form/Redirect.tsx index 10af834fe2..694e658a55 100644 --- a/packages/client/src/components/form/Redirect.tsx +++ b/packages/client/src/components/form/Redirect.tsx @@ -8,34 +8,86 @@ * * Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS. */ -import { IFormData, IFormSectionData } from '@client/forms' +import { + IFormData, + IFormField, + IFormFieldValue, + IFormSectionData, + IHttpFormField, + Ii18nRedirectFormField +} from '@client/forms' import { evalExpressionInFieldDefinition } from '@client/forms/utils' import { getOfflineData } from '@client/offline/selectors' import { getUserDetails } from '@client/profile/profileSelectors' -import React from 'react' +import React, { useEffect } from 'react' import { useSelector } from 'react-redux' -import { Redirect } from 'react-router-dom' +import { Link } from '@opencrvs/components' +import { useHttp } from '@client/components/form/http' export const RedirectField = ({ - to, + fields, form, - draft + draft, + fieldDefinition, + setFieldValue, + isDisabled }: { - to: string + fields: IFormField[] form: IFormSectionData draft: IFormData + fieldDefinition: Ii18nRedirectFormField + setFieldValue: (name: string, value: IFormFieldValue) => void + isDisabled?: boolean }) => { const config = useSelector(getOfflineData) const user = useSelector(getUserDetails) + const { + options: { + url: to, + callback: { params } + } + } = fieldDefinition + const evalPath = evalExpressionInFieldDefinition( + '`' + to + '`', + form, + config, + draft, + user + ) + const trigger = fields.find( + (f) => f.name === fieldDefinition.options.callback.trigger + )! + const onChange: Parameters[1] = ({ data, error, loading }) => + setFieldValue(trigger.name, { loading, data, error } as IFormFieldValue) + + const { call } = useHttp( + trigger as IHttpFormField, + onChange, + form, + config, + draft, + user + ) + + useEffect(() => { + const hasRequestBeenMade = Boolean(form[trigger.name]) + function checkParamsPresentInURL() { + const urlParams = new URLSearchParams(window.location.search) + for (const [key, value] of Object.entries(params)) { + if (urlParams.get(key) !== value) { + return false + } + } + return true + } + if (checkParamsPresentInURL() && !hasRequestBeenMade) { + call() + } + }, [call, params, form, trigger]) + return ( - + + {fieldDefinition.label} + ) } diff --git a/packages/client/src/forms/index.ts b/packages/client/src/forms/index.ts index 2218acf648..5e60295ae7 100644 --- a/packages/client/src/forms/index.ts +++ b/packages/client/src/forms/index.ts @@ -731,6 +731,10 @@ export interface IRedirectFormField extends IFormFieldBase { type: typeof REDIRECT options: { url: string + callback: { + trigger: string + params: Record + } } } @@ -1238,10 +1242,14 @@ export interface Ii18nButtonFormField extends Ii18nFormFieldBase { } } -interface Ii18nRedirectFormField extends Ii18nFormFieldBase { +export interface Ii18nRedirectFormField extends Ii18nFormFieldBase { type: typeof REDIRECT options: { url: string + callback: { + trigger: string + params: Record + } } }