template config fonts baseUrl is updated with client's window.locatio…

…n.origin
opencrvs · Nov 1, 2024 · 12fbdcf · 12fbdcf
1 parent 320c3c6
commit 12fbdcf
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git a/packages/client/src/offline/reducer.ts b/packages/client/src/offline/reducer.ts
@@ -362,7 +362,23 @@ function reducer(
         systems,
         templates: {
           ...state.offlineData.templates,
-          certificates
+          certificates: (certificates as ICertificateConfigData[]).map((x) => {
+            const baseUrl = window.location.origin
+            if (x.fonts) {
+              x.fonts = Object.fromEntries(
+                Object.entries(x.fonts).map(([fontFamily, fontStyles]) => [
+                  fontFamily,
+                  {
+                    normal: `${baseUrl}${fontStyles.normal}`,
+                    bold: `${baseUrl}${fontStyles.bold}`,
+                    italics: `${baseUrl}${fontStyles.italics}`,
+                    bolditalics: `${baseUrl}${fontStyles.bolditalics}`
+                  }
+                ])
+              )
+            }
+            return x
+          })
         }
       }
 

diff --git a/packages/client/src/views/PrintCertificate/usePrintableCertificate.ts b/packages/client/src/views/PrintCertificate/usePrintableCertificate.ts
@@ -26,6 +26,7 @@ import { getOfflineData } from '@client/offline/selectors'
 import { getScope, getUserDetails } from '@client/profile/profileSelectors'
 import { IStoreState } from '@client/store'
 import {
+  getToken,
   hasRegisterScope,
   hasRegistrationClerkScope
 } from '@client/utils/authUtils'
@@ -136,23 +137,32 @@ export const usePrintableCertificate = () => {
     )
   const certificateFonts = certificateTemplateConfig?.fonts ?? {}
 
+  const downloadCertificateSvg = async (certificateUrl: string) => {
+    const response = await fetch(certificateUrl, {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${getToken()}`
+      }
+    })
+    const svg = await response.text()
+    return svg
+  }
+
   useEffect(() => {
     const certificateUrl =
       (declaration && certificateTemplateConfig?.svgUrl) || ''
 
     if (certificateUrl && declaration) {
-      fetch(certificateUrl)
-        .then((res) => res.text())
-        .then((certificateTemplate) => {
-          if (!certificateTemplate) return
-          const svgWithoutFonts = compileSvg(
-            certificateTemplate,
-            { ...declaration.data.template, preview: true },
-            state
-          )
-          const svgWithFonts = addFontsToSvg(svgWithoutFonts, certificateFonts)
-          setSvgCode(svgWithFonts)
-        })
+      downloadCertificateSvg(certificateUrl).then((certificateTemplate) => {
+        if (!certificateTemplate) return
+        const svgWithoutFonts = compileSvg(
+          certificateTemplate,
+          { ...declaration.data.template, preview: true },
+          state
+        )
+        const svgWithFonts = addFontsToSvg(svgWithoutFonts, certificateFonts)
+        setSvgCode(svgWithFonts)
+      })
     }
     // eslint-disable-next-line
   }, [declaration])
@@ -187,9 +197,10 @@ export const usePrintableCertificate = () => {
       }
     }
 
-    const svgTemplate = await fetch(certificateTemplateConfig.svgUrl).then(
-      (res) => res.text()
+    const svgTemplate = await downloadCertificateSvg(
+      certificateTemplateConfig.svgUrl
     )
+
     const svg = await compileSvg(
       svgTemplate,
       { ...draft.data.template, preview: false },