opencrvs · tareq89 · Apr 30, 2025
diff --git a/v1.7.0/product-specifications/core-functions/5.-print-certificate.md b/v1.7.0/product-specifications/core-functions/5.-print-certificate.md
@@ -6,9 +6,9 @@ OpenCRVS provides an issuance process that checks the collector's ID, provides f
 
 ### **Configuration options:**
 
-* Customise the certificate template
-* Enable/disable printing off in advance of issuance
-* Set certification fees for printing within legally specified time, delayed and late
+- Customise the certificate template
+- Enable/disable printing in advance of issuance
+- Set certification fees for printing within legally specified time, delayed and late
 
 ### **Pre-condition**
 
@@ -20,43 +20,45 @@ A Registration Agent or Registrar assigns and downloads the record in the Ready
 
 ### **Standard flow**
 
-1. Registration Agent or Registrar navigates to Ready for Print workqueue
+1. Registration Agent or Registrar navigates to Ready for print workqueue
 2. User assigns themselves to the record
 3. Record is downloaded and is now available to be printed and issued offline
 4. User clicks “Print”
-5. User selects who is collecting the certificate
+5. User selects which certificate template to use to print the certificate
+6. User selects who is collecting the certificate
    1. For a birth record this could be the Mother, Father or Informant
    2. If Someone else is collecting the certificate. Then the user captures their details.
-6. User checks the collectors ID against the details captured in the record
-7. User confirms the collectors proof of ID match
+7. User checks the collectors ID against the details captured in the record
+8. User confirms the collectors proof of ID match
    1. If they don’t the user is warned that by proceed, they will be responsible for issuing a certificate without the necessary proof of ID from the collector
-8. User is prompted to collect payment if fess are required (based on system configuration)
-9. User reviews the certificate preview
-10. User confirms certificate details are correct and clicks “Print”
-11. A new tab opens with the certificate as a pdf for the user to print
-12. User is navigated back to Ready to Print workqueue
-13. Record is sent to the Outbox for processing
-14. Once processed the record status is updated to ‘Issued’
+9. User is prompted to collect payment if fess are required (based on system configuration)
+10. User reviews the certificate preview
+11. User confirms certificate details are correct and clicks “Print”
+12. A new tab opens with the certificate as a pdf for the user to print
+13. User is navigated back to Ready to Print workqueue
+14. Record is sent to the Outbox for processing
+15. Once processed the record status is updated to ‘Issued’
 
 ### **Post conditions**
 
-* Record is removed from all workqueues but can be search for using tracking id, reg no. etc.
-* Record audit is updated to show that the record has been ‘Certified’ and ‘Issued’
+- Record is removed from all workqueues but can be search for using tracking id, reg no. etc.
+- Record audit is updated to show that the record has been ‘Certified’ and ‘Issued’
 
 ### **Variations/Exceptions**
 
 A user can choose to print in advance of issuance at step 5 in the flow above. This allows them to print the certificate in order for it to be collected and issued at a future date.
 
 #### Print in advance flow:
 
-1. User select print in advance of issuance
-2. User reviews the certificate preview
-3. User confirms certificate details are correct and clicks “Print”
-4. A new tab opens with the certificate as a pdf for the user to print
-5. User is navigated back to Ready to print workqueue
-6. Record is sent to the Outbox for processing
-7. Once processed the record status is updated to ‘Certified’
-8. Record is sent to the Ready to issue workqueue
-9. Record audit is updated to show that the record has been ‘Certified’
+1. User selects which certificate template to use to print the certificate
+2. User select print in advance of issuance
+3. User reviews the certificate preview
+4. User confirms certificate details are correct and clicks “Print”
+5. A new tab opens with the certificate as a pdf for the user to print
+6. User is navigated back to Ready to print workqueue
+7. Record is sent to the Outbox for processing
+8. Once processed the record status is updated to ‘Certified’
+9. Record is sent to the Ready to issue workqueue
+10. Record audit is updated to show that the record has been ‘Certified’
 
 {% embed url="https://youtu.be/UVCjQT6y4ik" %}
diff --git a/...-set-up-your-own-country-configuration/3.2.6-configure-certificate-templates.md b/...-set-up-your-own-country-configuration/3.2.6-configure-certificate-templates.md
@@ -1,64 +1,128 @@
-# 4.2.6 Configure certificate templates
+# 4.2.6 Configure Certificate Templates
 
 {% hint style="info" %}
-**Designed your certificate template?**\
-Once you have designed your certificate templates you are ready to configure the SVG. Please refer to our guidance on designing a certificate here: [3.5-designing-a-certificate-template.md](../../2.-gather-requirements/3.5-designing-a-certificate-template.md "mention")
+**Designed your certificate template?**  
+Once you have designed your certificate templates, you are ready to configure the SVG. Please refer to our guidance on designing a certificate here: [3.5-designing-a-certificate-template.md](../../2.-gather-requirements/3.5-designing-a-certificate-template.md "mention")
 {% endhint %}
 
-### Step 1. Configuring certificate SVG file
+### Step 1. Configuring Certificate SVG File
 
-The next step is for you to design and configure your certificate template [SVG](https://en.wikipedia.org/wiki/SVG) files.  Your certificates will be different [SVG](https://en.wikipedia.org/wiki/SVG) files for each vital event.  You use **\{{** [**handlebar**](https://handlebarsjs.com/) **\}}** syntax to mark where in the SVG you wish the citizen data to be rendered.  To get an idea of what we mean, take a look at the Farajaland example certificates and available handlebars for each event:
+The next step is for you to design and configure your certificate template [SVG](https://en.wikipedia.org/wiki/SVG) files. Your certificates will be different [SVG](https://en.wikipedia.org/wiki/SVG) files for each vital event. You use **\{{** [**handlebar**](https://handlebarsjs.com/) **\}}** syntax to mark where in the SVG you wish the citizen data to be rendered. To get an idea of what we mean, take a look at the Farajaland example certificates and available handlebars for each event:
 
-| Event    | Certificate template SVG | Available handlebars                                                                                                                       |
+| Event    | Certificate Template SVG | Available Handlebar Links                                                                                                                  |
 | -------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
 | Birth    | Birth Certificate        | [Default birth handlebars](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/birth/certificate-handlebars.ts)       |
 | Death    | Death Certificate        | [Default death handlebars](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/death/certficate-handlebars.ts)        |
 | Marriage | Marriage Certificate     | [Default marriage handlebars](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/marriage/certificate-handlebars.ts) |
 
-We have supplied helper handlebars for all use cases. Some need explanation, or if you feel that you do not have a handlebar for your specific needs, please discuss with us on [Github](https://github.com/opencrvs/opencrvs-core/discussions) or email us at [team@opencrvs.org](mailto:team@opencrvs.org) and we can work on a new handlebar for you.  \
-\
-As an example of a handlebar that needs explanation: `{{placeOfBirth}}` is used if a user selects a pre-loaded [health facility](3.2.3-set-up-cr-offices-and-health-facilities/3.2.3.2-prepare-source-file-for-health-facilities.md). This handlebar dynamically returns the location hierarchy, e.g. "district, state" to render based on the location of the [health facility](3.2.3-set-up-cr-offices-and-health-facilities/3.2.3.2-prepare-source-file-for-health-facilities.md). You can see that in our place of birth location in the SVG, we have if/else logic to handle whatever the user chooses to enter into the form.\
-\
-It is possible to make custom form fields and when you do, custom handlebars are automatically created. Here is an example of a [custom form field handlebar](https://github.com/opencrvs/opencrvs-countryconfig/blob/551e864ab59d59ae2e65eec8d1d0d9651ae0a3d7/src/form/custom-fields.ts#L29)\
-\
-Open the SVG in a text editor tool such as Visual Studio Code. Replace the dummy text you added with the required handlebar.\
-\
-Example:\
-`<text fill="#222222" xml:space="preserve" style="white-space: pre" font-family="Noto Sans-Bold" font-size="16" font-weight="bold" letter-spacing="0px"><tspan x="86.6699" y="444.268">{{eventDate}}&#10;</tspan></text>`\\
+We have supplied helper handlebars for all use cases. Some handlebars require additional explanation, or if you feel that you do not have a handlebar for your specific needs, please discuss with us on [Github](https://github.com/opencrvs/opencrvs-core/discussions) or email us at [team@opencrvs.org](mailto:team@opencrvs.org), and we can work on a new handlebar for you.
+
+As an example of a handlebar that needs explanation: `{{placeOfBirth}}` is used if a user selects a pre-loaded [health facility](3.2.3-set-up-cr-offices-and-health-facilities/3.2.3.2-prepare-source-file-for-health-facilities.md). This handlebar dynamically returns the location hierarchy, e.g., "district, state," to render based on the location of the [health facility](3.2.3-set-up-cr-offices-and-health-facilities/3.2.3.2-prepare-source-file-for-health-facilities.md). You can see that in our place of birth location in the SVG, we have if/else logic to handle whatever the user chooses to enter into the form.
+
+It is possible to make custom form fields, and when you do, custom handlebars are automatically created. Here is an example of a [custom form field handlebar](https://github.com/opencrvs/opencrvs-countryconfig/blob/v1.7.0/src/form/custom-fields.ts#L29).
+
+Open the SVG file in a text editor tool such as Visual Studio Code. Replace the dummy text you added with the required handlebar.
+
+Example:  
+`<text fill="#222222" xml:space="preserve" style="white-space: pre" font-family="Noto Sans-Bold" font-size="16" font-weight="bold" letter-spacing="0px"><tspan x="86.6699" y="444.268">{{eventDate}}&#10;</tspan></text>`
 
 {% hint style="info" %}
-Watching the videos below will really help you understand how to configure the certificate.  The time spent watching the video will make your life much easier!
+Watching the videos below will really help you understand how to configure the certificate. The time spent watching the video will make your life much easier!
 {% endhint %}
 
 {% embed url="https://youtu.be/Oh5sDYK4GNo" %}
 
-### **Step 2: Add custom font files**
+Let’s assume we want to add a new certificate template for the birth event. Let’s call it a certified birth certificate. Drop the `certified-birth-certificate.svg` file into the following directory:  
+[src/api/certificates/source](https://github.com/opencrvs/opencrvs-farajaland/tree/v1.7.0/src/api/certificates/source).
+
+You can learn about designing an SVG certificate in [designing-a-certificate-template](v1.7.0/setup/2.-gather-requirements/3.5-designing-a-certificate-template.md) chapter of this documentation.
+
+---
+
+### Step 2: Configure the Certificate
+
+1. Open the file [/src/api/certificates/handler.ts](https://github.com/opencrvs/opencrvs-farajaland/blob/v1.7.0/src/api/certificates/handler.ts).
+2. In the `certificateConfigs` array, add a new entry for the `certified-birth-certificate.svg` template:
+
+```
+
+{
+     id: 'birth-certificate-certified-copy',
+     event: 'birth',
+     label: {
+       id: 'certificates.birth.certificate.copy',
+       defaultMessage: 'Birth Certificate certified copy',
+       description: 'The label for a birth certificate'
+     },
+     isDefault: false,
+     fee: {
+       onTime: 7,
+       late: 10,
+       delayed: 18
+     },
+     svgUrl: '/api/countryconfig/certificates/birth-certificate-certified-copy.svg',
+     fonts: {
+       'Libre Baskerville': {
+         normal: '/api/countryconfig/fonts/LibreBaskerville-Regular.ttf',
+         bold: '/api/countryconfig/fonts/LibreBaskerville-Bold.ttf',
+         italics: '/api/countryconfig/fonts/LibreBaskerville-Italic.ttf',
+         bolditalics: '/api/countryconfig/fonts/LibreBaskerville-Regular.ttf'
+       }
+     }
+   }
+
+```
+
+### Configuration Properties
+
+Here is an explanation of each property:
 
-Drop your custom font file (.ttf) in this directory: [https://github.com/opencrvs/opencrvs-countryconfig/tree/develop/src/api/fonts](https://github.com/opencrvs/opencrvs-countryconfig/tree/develop/src/api/fonts)\
-\
-Then add an entry regarding your new font similar to the "NotoSans" ones here: [https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificate-configuration/handler.ts#L27-L34](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificate-configuration/handler.ts#L27-L34)For example, if we wanted to add the Merriweather font it would look something like this:
+- **`id`**: A unique identifier for the certificate template.
+- **`event`**: The name of the event the certificate is linked to. It must match the [correct event name](https://github.com/opencrvs/opencrvs-farajaland/blob/v1.7.0/src/form/types/types.ts#L43).
+- **`label`**:
+  - The `id` should match an entry in [src/translations/client.csv](https://github.com/opencrvs/opencrvs-countryconfig/blob/v1.7.0/src/translations/client.csv?plain=1#L173).
+  - This is used for internationalization.
+- **`isDefault`**: Determines if this template is selected by default in the print certificate form. Only one template per event should have `isDefault: true`.
+- **`fee`**: Defines fees based on the certificate printing timeframe (`onTime`, `late`, or `delayed`). These terms are defined in the [application-config](https://github.com/opencrvs/opencrvs-countryconfig/blob/v1.7.0/src/api/application/application-config.ts#L6).
+- **`svgUrl`**: File path to the SVG file, starting from the `api` folder.
+- **`fonts`**:
+  - Fonts to be used in the certificate. Ensure that the `font-family` attribute in the SVG matches the font names specified here.
+  - To use a font:
+    - Drop the font files (e.g., regular, bold, italic) in [src/api/fonts](https://github.com/opencrvs/opencrvs-countryconfig/blob/v1.7.0/src/api/fonts). **Do not create subfolders.**
+    - Define the font in the configuration, as shown below:
 
 ```
+
+      'Font Name': {
+        normal: '/api/countryconfig/fonts/FontName-Regular.ttf',
+        bold: '/api/countryconfig/fonts/FontName-Bold.ttf',
+        italics: '/api/countryconfig/fonts/FontName-Italic.ttf',
+        bolditalics: '/api/countryconfig/fonts/FontName-Regular.ttf'
+      }
+
+```
+
+- Multiple fonts can be added:
+
+```
+
     fonts: {
-      ['Noto Sans']: {
-        normal: `${COUNTRY_CONFIG_URL}/fonts/NotoSans-Regular.ttf`,
-        bold: `${COUNTRY_CONFIG_URL}/fonts/NotoSans-SemiBold.ttf`,
-        italics: `${COUNTRY_CONFIG_URL}/fonts/NotoSans-Regular.ttf`,
-        bolditalics: `${COUNTRY_CONFIG_URL}/fonts/NotoSans-Regular.ttf`
+      'Libre Baskerville': {
+        normal: '/api/countryconfig/fonts/LibreBaskerville-Regular.ttf',
+        bold: '/api/countryconfig/fonts/LibreBaskerville-Bold.ttf',
+        italics: '/api/countryconfig/fonts/LibreBaskerville-Italic.ttf',
+        bolditalics: '/api/countryconfig/fonts/LibreBaskerville-Regular.ttf'
       },
-      ['Merriweather']: {
-        normal: `${COUNTRY_CONFIG_URL}/fonts/Merriweather-Regular.ttf`,
-        bold: `${COUNTRY_CONFIG_URL}/fonts/Merriweather-Black.ttf`,
-        italics: `${COUNTRY_CONFIG_URL}/fonts/Merriweather-Regular.ttf`,
-        bolditalics: `${COUNTRY_CONFIG_URL}/fonts/Merriweather-Regular.ttf`
+      'Noto Sans': {
+        normal: '/api/countryconfig/fonts/NotoSans-Regular.ttf',
+        bold: '/api/countryconfig/fonts/NotoSans-Bold.ttf',
+        italics: '/api/countryconfig/fonts/NotoSans-Italic.ttf',
+        bolditalics: '/api/countryconfig/fonts/NotoSans-Regular.ttf'
       }
     }
-```
-
-This would require the "Merriweather-Regular.ttf" & "Merriweather-Black.ttf" file to be available in the directory mentioned above.
 
-### **Step 3. Seed, or upload and preview**
+```
 
-When you are ready to seed your database in [step 3.2.8](3.2.8-seeding-your-local-database.md), these certificates will be uploaded.  Alternatively, a National System Admin user can upload the certificate template at any time in the functional configuration UI. You can preview the certificate to check that the some handlebar data is loading as intended.&#x20;
+### Step 3: Deploy the Configuration
 
-###
+Deploy the `country-config`. The newly added certificate template will now be available in the print certificate form of the OpenCRVS application.