Implementing HTML Subscription Agreement

In order to create an HTML Subscription agreement we have to:

Go to CP > Advanced > Issuer agreements 
Name: Standard_Subscription_agreement_{oppId}

if it's an amendment the name should be: standard_amendment_{oppId}

if the agreement belongs to a web3 opportunity the name should be:
web3_subscription_agreement_{oppId}

Replace {oppid} with the opportunity Id.

Type: Yes_no

Leave DocusignID Empty on Fundraise page

And paste the subdoc on the Agreement Text.

Conditional cases

{{#ifCond investorType '===' 'individual'}}{{investorName}}{{/ifCond}}

{{#ifCond investorType '===' 'entity'}}{{investorEntityName}}{{/ifCond}}

{{#ifCond investorType '===' 'individual'}}{{investorName}}{{/ifCond}}

{{#ifCond investorType '===' 'entity'}}{{legalSignerName}}{{/ifCond}}

Investor Name & Legal Signer

{{#ifCond investorType '===' 'individual'}}{{investorName}}{{/ifCond}}{{#ifCond investorType '===' 'entity'}}{{legalSignerName}}{{/ifCond}}

Investor Name & Entity Name:

{{#ifCond investorType '===' 'individual'}}{{investorName}}{{/ifCond}}{{#ifCond investorType '===' 'entity'}}{{investorEntityName}}{{/ifCond}}

How to use Different:

{{#ifCond investorType '!=' 'individual'}}{{investorName}} xxx {{/ifCond}}

{{#ifCond individualTaxStatus.resident '===' true}} xxxx {{/ifCond}}

Difference between == and ===

=== is a stricter check; 0 == '0'  but 0 !== '0' one's a number and the other one is a string

 

Check if variable exist:

{{#if signatureDate}}{{signatureDate}}{{else}}[Pending signature]{{/if}}

You can read more about handleBars here:

https://handlebarsjs.com/guide/builtin-helpers.html#if

Available fields:

investorAddress
investorAddressOne
investorAddressTwo
investorCountry
investorEmail
investorType
investorName
investorEntityName
investorEntityType
investorBirthday
investorPhone
issuerName
signatureDate (will only be displayed after countersign)
legalSignerName
investmentCurrency
investmentAmount
investorIp

Not available fields:

We don't know the kind of entityType (Corp/LLC/etc) So we should ask the investor that information.

Page content:

<div class="d-flex flex-column" id="Page_1" style="height: 14.503in">
   <div class="container-fluid">
   </div>

   <div id="pageFooter-1" class="container-fluid text-left flex-column align-items-end mt-auto mx-auto">
     <div class="row">
      <div class="col-12 p-2">
      </div>
     </div>
   </div>
</div>

Frequently used variables:

{{investmentCurrency}} {{investmentAmount}}

HTML page break:

<p style="page-break-before: always;margin-top:10%;"><br><br></p>

Signature class:

Import Google Font:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap" rel="stylesheet">

Add css class:

.signature {
font-family: "Just Another Hand", cursive;

font-size: 24px;
}

Use it:

<p class="signature">
{{#ifCond investorType '===' 'individual'}}{{investorName}}{{/ifCond}}
{{#ifCond investorType '===' 'entity'}}{{legalSignerName}}{{/ifCond}}
</p>

Header & footer:

<div id="pageHeader">Default header</div>
<div id="pageHeader-first">Header on first page</div>
<div id="pageHeader-2">Header on second page</div>
<div id="pageHeader-3">Header on third page</div>
<div id="pageHeader-last">Header on last page</div>
...
<div id="pageFooter">Default footer</div>
<div id="pageFooter-first">Footer on first page</div>
<div id="pageFooter-2">Footer on second page</div>
<div id="pageFooter-last">Footer on last page</div>

How we use the footer:

<div id="pageFooter-1" class="container-fluid text-left flex-column align-items-end mt-auto mx-auto">
<div class="row">
<div class="col-12 p-2">
- Any context here -
</div>
</div>
</div>

Default CSS styles:

<style>
html {
-webkit-print-color-adjust: exact;
}
</style>

 

Test it locally:

https://www.npmjs.com/package/pdf-creator-node

install package

npm i handlebars
npm i fs
npm i puppeteer

Edit this file:

var handlebars = require("handlebars");

var fs = require("fs");

var path = require("path");

var puppeteer = require("puppeteer");

// Get command-line arguments

const args = process.argv.slice(2);

if (args.length < 1) {

console.error("Usage: node parser.js <name of the file to be processed>");

process.exit(1);

}

const readFile = args[0];

const writeFile = readFile.replace(/\.html$/, ".pdf");

const fullPath = path.resolve(__dirname, readFile);

if (!fs.existsSync(fullPath)) {

console.error(`Error: File "${fullPath}" does not exist.`);

process.exit(1);

}

handlebars.registerHelper("ifCond", function (v1, operator, v2, options) {

switch (operator) {

case "==":

return v1 == v2 ? options.fn(this) : options.inverse(this);

case "===":

return v1 === v2 ? options.fn(this) : options.inverse(this);

case "!=":

return v1 != v2 ? options.fn(this) : options.inverse(this);

case "!==":

return v1 !== v2 ? options.fn(this) : options.inverse(this);

case "<":

return v1 < v2 ? options.fn(this) : options.inverse(this);

case "<=":

return v1 <= v2 ? options.fn(this) : options.inverse(this);

case ">":

return v1 > v2 ? options.fn(this) : options.inverse(this);

case ">=":

return v1 >= v2 ? options.fn(this) : options.inverse(this);

case "&&":

return v1 && v2 ? options.fn(this) : options.inverse(this);

case "||":

return v1 || v2 ? options.fn(this) : options.inverse(this);

default:

return options.inverse(this);

}

});

const data = {

investorType: "individual",

paymentPreferences: {

bankName: " DDDD",

country: "AX",

branchAddress: "1324",

accountHolderName: "1234",

accountNum: "2134",

iban: "",

swift: "1234"

},

investorIp: "investorIp",

signatureDate: "October 22, 2024",

investorBirthday: "Apr 1, 1991",

investorEntityName: "Subscriber",

legalSignerName: "",

investmentAmount: "1,164,161.00",

investmentCurrency: "USD",

investorAddressOne: "500 Madison Ave",

investorAddressTwo: "NYC, NY 10011",

investorCountry: "US",

investorName: "Ariel Lipschutz",

investorPhone: "646-574-7735",

investorEmail: "[e-mail]"

};

async function createPDF(data) {

var templateHtml = fs.readFileSync(readFile, 'utf8');

var template = handlebars.compile(templateHtml);

var html = template(data);

var pdfPath = writeFile;

var options = {

format: 'A4',

path: pdfPath

};

const browser = await puppeteer.launch({

args: [],

headless: true

});

var page = await browser.newPage();

await page.setContent(html, {

waitUntil: 'networkidle0'

});

await page.pdf(options);

await browser.close();

console.log('Finished with this script!');

// console.log(writeFile);

}

console.log('Starting the script!');

createPDF(data);

Execute:

node parser.js {{filename.html}} && open {{filename.pdf}}

Entities information:

When working with Entities, there are 2 kind of names to use.

The name of the investor is always investorEntityName

The legal signer is legalSignerName

The person who signs is the legalSignerName

 

 

Adding a repeated object

To add a repeated object we have to do this:
1) From Layout > Add Fieldset
2) From Data > Add Data Grid 
3) Add elements inside the Data Grid

Then, in your agreement, display the value like this:

{{#each taxResidencyList}}

<tr>

<td class="text-center">{{country}}</td>

<td class="text-center">{{taxRefType}}</td>

<td class="text-center">{{taxRefNumber}}</td>

</tr>

{{/each}}

 

Chat GPT instructions:

Your job is to Convert images into HTML and add the HTML content into the {{page content}} section.

A few considerations:

Use bootstrap 4.5.2 classes when you can and no other ones.
Do not use h1, h2, h3, h4, h5. Just use the <p> tag.
Do not use the <em> tag.

Whenever you see a list of underscores, that means that space is for the user to add some text, so replace that "________" with an <input /> using bootstrap classes with border-bottom.

If you add an input, consider adding some variables inside double brackets as value.
These are the list of variables to use.
investorAddress
investorAddressOne
investorAddressTwo
investorCountry
investorEmail
investorType
investorName
investorEntityName
investorEntityType
investorBirthday
investorPhone
issuerName
signatureDate
legalSignerName
investmentCurrency
investmentAmount
investorIp
Example of using a variable:
<input type="text" value="{{investorAddress}}" class="form-control border-0 border-bottom mb-2" style="border-bottom: 1px solid #000 !important;" />
If there is a differentiation between individuals and entities, consider adding this 'if' inside the value element if you are working on an individual section:
{{#ifCond investorType '===' 'individual'}}{{investorName}}{{/ifCond}}

If you are working on an entity section:
{{#ifCond investorType '===' 'entity'}}{{investorEntityName}}{{/ifCond}}

This means that if we work with an individual investor, the entity side will be empty.

If we work with an entity investor, the individual side will be empty.

If there is an input that represents a date, use this format

{{#if signatureDate}}{{signatureDate}}{{else}}[Pending signature]{{/if}}
if there is a signature input, or it's a "By:" input, that's a signature too. So, add class "signature" on that specific input. The Authorized Signature is not the signature is the name that belongs to that signature

If you see some footer like Page 1 of xx or page 1 or something that could be a footer add that piece of content into {{page footer}}

This is the container you must use every time you will be converting an image into an HTML page

<div class="d-flex flex-column" style="height: 14.403in">
<div class="container-fluid">
{{page content}}
</div>

<div class="container-fluid text-left flex-column align-items-end mt-auto mx-auto">
<div class="row">
<div class="col-12 p-2">

{{page footer}}
</div>
</div>
</div>
</div>
<p style="page-break-before: always;margin-top:10%;"><br><br></p>