add multi-page + security paper guidance in certificate configuration

Author: tareq89

v1.7.0/setup/3.-installation/3.2-set-up-your-own-country-configuration/3.2.6-configure-certificate-templates.md

@@ -7,7 +7,7 @@ Once you have designed your certificate templates you are ready to configure the
 
 ### Step 1. Configuring certificate SVG files
 
-The next step is for you to design and configure your certificate template [SVG](https://en.wikipedia.org/wiki/SVG) files.  You can have as many different certificate as you like, represented as 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.  
+The next step is for you to design and configure your certificate template [SVG](https://en.wikipedia.org/wiki/SVG) files. You can have as many different certificate as you like, represented as 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.  
 
 All your SVGs should be placed in the [**src/api/certificates/source**](https://github.com/opencrvs/opencrvs-countryconfig/tree/develop/src/api/certificates/source) folder.
 
@@ -18,13 +18,13 @@ To get an idea of what we mean, take a look at the Farajaland example certificat
 | Birth | <p><a href="https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificates/source/birth-certificate-certified-copy.svg">Birth Certificate</a></p><p><a href="https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificates/source/birth-certificate-certified-copy.svg">Birth Certified Copy</a></p> | [Default birth handlebars](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/birth/certificate-handlebars.ts) |
 | Death | <p><a href="https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificates/source/death-certificate-certified-copy.svg">Death Certificate</a></p><p><a href="https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificates/source/death-certificate-certified-copy.svg">Death Certified Copy</a></p> | [Default death handlebars](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/death/certficate-handlebars.ts)  |
 
-We have supplied helper handlebars for many 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 [[email protected]](mailto:[email protected]) and we can work on a new handlebar for you.  \
+We have supplied helper handlebars for many 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 [[email protected]](mailto:[email protected]) 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.
 
-Sometimes you need to format the handlebars. For example to wrap text, or perform any number of manipulations.  You can configure ["handlebar helper"](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/common/certificate/handlebars/helpers.ts) functions to do this.
+Sometimes you need to format the handlebars. For example to wrap text, or perform any number of manipulations. You can configure ["handlebar helper"](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/common/certificate/handlebars/helpers.ts) functions to do this.
 
-We have some configurable helper functions to get you started [here](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/common/certificate/handlebars/helpers.ts).  We also have some [built in](https://github.com/opencrvs/opencrvs-core/blob/cf1cb763abae7211fa3648a742d3763fd947eaa3/packages/client/src/views/PrintCertificate/PDFUtils.ts#L183) to opencrvs-core.  Such as this one, giving you access to every property that exists in a FHIR Location.
+We have some configurable helper functions to get you started [here](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/common/certificate/handlebars/helpers.ts). We also have some [built in](https://github.com/opencrvs/opencrvs-core/blob/cf1cb763abae7211fa3648a742d3763fd947eaa3/packages/client/src/views/PrintCertificate/PDFUtils.ts#L183) to opencrvs-core. Such as this one, giving you access to every property that exists in a FHIR Location.
 
 ```xml
 {{location districtPlaceofbirthId 'name'}}
@@ -39,7 +39,7 @@ 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" %}
@@ -109,10 +109,52 @@ onst certificateConfigs: ICertificateConfigData[] = [
     }, ...
 ```
 
-* The **id** property must be unique.
-* The **event** property must be set to the supported `Event.<prop>` provided to you by TypeScript.
-* The **label** property must be a [react-intl formatjs ](https://www.npmjs.com/package/react-intl)object with a translation for the visible label that you wish to apply to this certificate in the select field that is available to the user.  Appropriate translations must exist in your client.csv file for the **label.id** where necessary.  You can learn about how to configure OpenCRVS content translation in the section: [Managing Language Content](3.2.5-set-up-application-settings/3.2.9.1-managing-language-content/).
-* The **isDefault** property can only be applied to **one item per event**.  Its the first item users will see in the select UI form field when choosing a certificate.
-* The **fee** property allows you to configure unique fees for the certificate type.  Defaults are applied from applcation-config.ts
-* The **svgUrl** property is self explanatory.  The SVG file must exist in this location.
-* The **fonts** property, as above, must point to ttf font files that exist in the referenced location.
+- The **id** property must be unique.
+- The **event** property must be set to the supported `Event.<prop>` provided to you by TypeScript.
+- The **label** property must be a [react-intl formatjs ](https://www.npmjs.com/package/react-intl)object with a translation for the visible label that you wish to apply to this certificate in the select field that is available to the user. Appropriate translations must exist in your client.csv file for the **label.id** where necessary. You can learn about how to configure OpenCRVS content translation in the section: [Managing Language Content](3.2.5-set-up-application-settings/3.2.9.1-managing-language-content/).
+- The **isDefault** property can only be applied to **one item per event**. Its the first item users will see in the select UI form field when choosing a certificate.
+- The **fee** property allows you to configure unique fees for the certificate type. Defaults are applied from applcation-config.ts
+- The **svgUrl** property is self explanatory. The SVG file must exist in this location.
+- The **fonts** property, as above, must point to ttf font files that exist in the referenced location.
+
+## Multi-Page Certificate Support
+
+Previously, our certificate generation system only supported single-page SVG certificate templates. Some countries might need to issue certificates that span two or more pages, which required extending our SVG→PDF pipeline and certificate preview UI.
+
+We have introduced first-class multi-page certificate support in this version.
+
+The feature allows:
+
+- Multiple pages defined inside one SVG using data-page markers
+- Automatic splitting of the SVG into page-specific PDF content
+- Correct page-by-page preview for staff verification before final document generation
+- Compatibility with existing absolutely-positioned svg templates
+- Backwards compatibility with single-page SVG templates
+
+### How Multi-Page Certificates Are Defined
+
+Multi-page templates are delivered as one master SVG containing different page sections.
+Each page is wrapped in a <g> element marked with the attribute:
+
+```
+<g data-page="1">
+...
+</g> <!-- Content for page 1 goes here-->
+
+<g data-page="2">
+... <!-- Content for page 1 goes here-->
+</g>
+```
+
+An example certificate configuration [can be found here](https://github.com/opencrvs/opencrvs-countryconfig/blob/release-v1.9.2/src/api/certificates/source/v2.tennis-club-membership-certificate-multipage.svg?short_path=6fa63f6#L2)
+
+## Hiding Header and Footer on Security Paper Certificates
+
+Security-paper–based certificates already contain their own official background, headers, footers, qr code printed on the physical security paper itself.
+
+Because of that, No app-generated header, footer or qr code must appear.
+Any extra header/footer/qr code would overlap the preprinted design and invalidate the document.
+
+In such case, we need to design first a svg template with absolute positioning of svg elements including header, footer and qr code. And once it renders correctly, we add condition to hide it dynamically using the `preview` variable.
+
+An example certificate configuration [can be found here](https://github.com/opencrvs/opencrvs-countryconfig/blob/release-v1.9.2/src/api/certificates/source/v2.birth-certificate.svg?short_path=da46a2e#L4)