add multi-page + security paper guidance in certificate configuration

Author: tareq89

v1.9.0/setup/3.-installation/3.2-set-up-your-own-country-configuration/3.2.7-configure-declaration-forms/3.2.6-configure-certificate-templates.md

@@ -70,8 +70,6 @@ To get an idea of what we mean, take a look at the Farajaland example certificat
 | V2 Birth | <p><a href="https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificates/source/v2.birth-certificate.svg">Birth Certificate</a></p><p><a href="https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificates/source/v2.birth-certificate-certified-copy.svg">Birth Certified Copy</a></p> |
 | V2 Death | <p><a href="https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificates/source/v2.death-certificate.svg">Death Certificate</a></p><p><a href="https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificates/source/v2.death-certificate-certified-copy.svg">Death Certified Copy</a></p> |
 
-
-
 ### **Step 2: Add custom font files**
 
 Any fonts can be used in your certificate provided you have permission and are prepared to accept the client load time required to render the font file.
@@ -94,7 +92,7 @@ An example v2 certificate config looks like this:
     defaultMessage: 'Birth Certificate copy',
     description: 'The label for a birth certificate'
   },
-  isDefault: true, 
+  isDefault: true,
   fee: {
     onTime: 7, // Fees assocaited with the certificate
     late: 10.6,
@@ -118,12 +116,54 @@ An example v2 certificate config looks like this:
 }
 ```
 
-* The **id** property must be unique.
-* **isV2Template** must be set to true
-* 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.
-* **conditionals** allow you to set visibility conditionals to configure the business logic from metadata, deciding when and how often this template should be available for printing.  In some countries, legal requirements state that certain templates should only be printed once, and only then certified copies should be printed.
+- The **id** property must be unique.
+- **isV2Template** must be set to true
+- 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.
+- **conditionals** allow you to set visibility conditionals to configure the business logic from metadata, deciding when and how often this template should be available for printing. In some countries, legal requirements state that certain templates should only be printed once, and only then certified copies should be printed.
+
+## 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 a svg template with absolute positioned svg elements including header, footer and qr code. And once it renders correctly, we add condition to show it dynamically using the `$review` helper variable. In the review mode, it will show the header, footer and qr code. But when the pdf will be printed, the header, footer and qr code will be ommitted so that content from the security paper can take place.
+
+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)