Skip to content

Commit

Permalink
in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
tareq89 committed Jan 13, 2025
1 parent f5083b4 commit ab0e65e
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { DATE, PARAGRAPH, TEXT } from '@client/forms'
import { DateField } from '@opencrvs/components/lib/DateField'
import { Text } from '@opencrvs/components/lib/Text'
import { TextInput } from '@opencrvs/components/lib/TextInput'
import { RadioGroup } from '@opencrvs/components/lib/Radio'
import * as React from 'react'

import styled, { keyframes } from 'styled-components'
Expand Down Expand Up @@ -196,7 +197,19 @@ const GeneratedInputField = React.memo(
</InputField>
)
}
return <div>Unsupported field type {fieldDefinition.type}</div>
if (fieldDefinition.type === 'RADIO_GROUP') {
return (
<InputField {...inputFieldProps}>
<RadioGroup
{...inputProps}
onChange={(val: string) => setFieldValue(fieldDefinition.id, val)}
options={fieldDefinition.options}
value={inputProps.value as string}
/>
</InputField>
)
}
// return <div>Unsupported field type {fieldDefinition.type}</div>
}
)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import React, { useEffect } from 'react'
import { defineMessages } from 'react-intl'
import { useNavigate } from 'react-router-dom'
import { v4 as uuid } from 'uuid'
import styled from 'styled-components'
import { useIntl } from 'react-intl'
import { useTypedParams } from 'react-router-typesafe-routes/dom'
import { getCurrentEventState, ActionType } from '@opencrvs/commons/client'
import { ROUTES } from '@client/v2-events/routes'
Expand All @@ -23,7 +25,24 @@ import { useEventFormNavigation } from '@client/v2-events/features/events/useEve
import { useEventConfiguration } from '@client/v2-events/features/events/useEventConfiguration'
import { useEventFormData } from '@client/v2-events/features/events/useEventFormData'
import { FormLayout } from '@client/v2-events/layouts/form'
import { ReviewCertificate } from '@client/v2-events/features/print-certificate/ReviewCertificateAction'
import { usePrintableCertificate } from '@client/v2-events/hooks/usePrintableCertificate'
import {
Box,
Button,
Content,
Frame,
Icon,
Spinner,
Stack
} from '@opencrvs/components'

const CertificateContainer = styled.div`
svg {
/* limits the certificate overflowing on small screens */
max-width: 100%;
}
`
const messages = defineMessages({
registerActionTitle: {
id: 'registerAction.title',
Expand All @@ -49,14 +68,14 @@ const messages = defineMessages({
*/
export function Review() {
const { eventId } = useTypedParams(ROUTES.V2.EVENTS.COLLECT_CERTIFICATE)
const intl = useIntl()
const events = useEvents()
const [modal, openModal] = useModal()
const navigate = useNavigate()
const { goToHome } = useEventFormNavigation()
const collectCertificateMutation = events.actions.collectCertificate

const [event] = events.getEvent.useSuspenseQuery(eventId)

const { eventConfiguration: config } = useEventConfiguration(event.type)

if (!config) {
Expand All @@ -75,6 +94,10 @@ export function Review() {
}, [event, eventId, setFormValues])

const form = getFormValues(eventId)
console.log(form)

const { svgCode, handleCertify, isPrintInAdvance, canUserEditRecord } =
usePrintableCertificate(form)

async function handleEdit({
pageId,
Expand Down Expand Up @@ -115,6 +138,53 @@ export function Review() {
goToHome()
}
}
const confirmAndPrint = async () => {
const saveAndExitConfirm = await openModal<boolean>((close) => (
<ResponsiveModal
id="confirm-print-modal"
title={
isPrintInAdvance
? intl.formatMessage(certificateMessages.printModalTitle)
: intl.formatMessage(certificateMessages.printAndIssueModalTitle)
}
actions={[
<Button
type="tertiary"
key="close-modal"
onClick={() => {
close(false)
}}
id="close-modal"
>
{intl.formatMessage(buttonMessages.cancel)}
</Button>,
<Button
type="primary"
key="print-certificate"
onClick={() => close(true)}
id="print-certificate"
>
{intl.formatMessage(buttonMessages.print)}
</Button>
]}
show={true}
handleClose={() => close(false)}
contentHeight={100}
>
{isPrintInAdvance
? intl.formatMessage(certificateMessages.printModalBody)
: intl.formatMessage(certificateMessages.printAndIssueModalBody)}
</ResponsiveModal>
))

if (saveAndExitConfirm) {
handleCertify()
}
}

if (!svgCode) {
return <Spinner id="review-certificate-loading" />
}

return (
<FormLayout
Expand All @@ -129,7 +199,56 @@ export function Review() {
goToHome()
}}
>
<ReviewComponent.Body
<Frame.LayoutCentered>
<Stack direction="column">
<Box>
<CertificateContainer
id="print"
dangerouslySetInnerHTML={{ __html: svgCode }}
/>
</Box>
<Content
title={intl.formatMessage(messages.registerActionTitle)}
bottomActionDirection="row"
bottomActionButtons={[
canUserEditRecord ? (
<Button
key="edit-record"
type="negative"
onClick={() =>
handleEdit({
pageId: formConfigs[0].pages[0].id,
fieldId: undefined
})
}
size="large"
fullWidth
>
<Icon name="X" size="medium" />
{intl.formatMessage(messages.registerActionDeclare)}
</Button>
) : (
<></>
),

<Button
key="confirm-and-print"
type="positive"
id="confirm-print"
onClick={confirmAndPrint}
size="large"
fullWidth
>
<Icon name="Check" size="medium" />
{intl.formatMessage(certificateMessages.confirmAndPrint)}
</Button>
]}
>
{intl.formatMessage(certificateMessages.reviewDescription)}
</Content>
</Stack>
</Frame.LayoutCentered>
{/* <ReviewComponent.Body
eventConfig={config}
form={form}
formConfig={formConfigs[0]}
Expand All @@ -145,7 +264,8 @@ export function Review() {
onConfirm={handleRegistration}
/>
{modal}
</ReviewComponent.Body>
</ReviewComponent.Body> */}
<ReviewCertificate />
</FormLayout>
)
}
67 changes: 67 additions & 0 deletions packages/client/src/v2-events/hooks/usePrintableCertificate.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*
* OpenCRVS is also distributed under the terms of the Civil Registration
* & Healthcare Disclaimer located at http://opencrvs.org/license.
*
* Copyright (C) The OpenCRVS Authors located at https://github.com/opencrvs/opencrvs-core/blob/master/AUTHORS.
*/

import { formatLongDate } from '@client/utils/date-formatting'
import { EventType } from '@client/utils/gateway'
import { getLocationHierarchy } from '@client/utils/locationUtils'
import { getUserName, UserDetails } from '@client/utils/userUtils'
import { cloneDeep } from 'lodash'
import { useDispatch, useSelector } from 'react-redux'
import { addFontsToSvg, compileSvg, svgToPdfTemplate } from './PDFUtils'
import {
calculatePrice,
getEventDate,
getRegisteredDate,
isCertificateForPrintInAdvance
} from './utils'
import { useNavigate } from 'react-router-dom'
import { ICertificateData } from '@client/utils/referenceApi'
import { fetchImageAsBase64 } from '@client/utils/imageUtils'
import { ActionFormData, isMinioUrl } from '@opencrvs/commons/client'

async function replaceMinioUrlWithBase64(template: Record<string, any>) {
async function recursiveTransform(obj: any) {
if (typeof obj !== 'object' || obj === null) {
return obj
}

const transformedObject = Array.isArray(obj) ? [...obj] : { ...obj }

for (const key in obj) {
const value = obj[key]
if (typeof value === 'string' && isMinioUrl(value)) {
transformedObject[key] = await fetchImageAsBase64(value)
} else if (typeof value === 'object') {
transformedObject[key] = await recursiveTransform(value)
} else {
transformedObject[key] = value
}
}

return transformedObject
}
return recursiveTransform(template)
}

export const usePrintableCertificate = (form: ActionFormData) => {
const svgCode = ''
const handleCertify = () => {}
const isPrintInAdvance = false
const canUserEditRecord = false
const handleEdit = () => {}
return {
svgCode,
handleCertify,
isPrintInAdvance,
canUserEditRecord,
handleEdit
}
}

0 comments on commit ab0e65e

Please sign in to comment.