fix: update the text for the campaign application (#675)

- create - show text that does not confirm campaign creation rather speaks about application for a campaign and further details required - following up on discussion https://discord.com/channels/778984868146577458/1136685006908035092/1307348393521057792 - and texts from https://docs.google.com/document/d/1uZXrVxPKHo9PkMrEE9oIBixO8IGWxbYGBkxlqIJJwck/edit?tab=t.0
podkrepi-bg · Dec 6, 2024 · 7973d42 · 7973d42
1 parent 46fe5b0
commit 7973d42
Show file tree

Hide file tree

Showing 8 changed files with 351 additions and 10 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -26,6 +26,19 @@
       "extends": ["plugin:@nrwl/nx/typescript"],
       "rules": {}
     },
+    {
+      "files": ["*.spec.ts"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {
+        "no-restricted-syntax": [
+          "error",
+          {
+            "message": "Do you really need to write file to disk in a test?",
+            "selector": "[name=writeFileSync], [name=writeFile]"
+          }
+        ]
+      }
+    },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nrwl/nx/javascript"],

diff --git a/apps/api/src/assets/templates/create-campaign-application-organizer.json b/apps/api/src/assets/templates/create-campaign-application-organizer.json
@@ -1,3 +1,3 @@
 {
-  "subject": "Създадена нова кампания"
+  "subject": "Потвърждение за получаване на заявка за дарителска кампания "
 }
diff --git a/apps/api/src/assets/templates/create-campaign-application-organizer.mjml b/apps/api/src/assets/templates/create-campaign-application-organizer.mjml
@@ -12,7 +12,7 @@
           padding-right="25px"
           padding-bottom="30px"
           padding-top="50px">
-          Успешно създадохте кампания в Подкрепи.бг
+          Потвърждение за получаване на заявка за дарителска кампания
         </mj-text>
       </mj-column>
     </mj-section>
@@ -25,7 +25,7 @@
           font-family="open Sans Helvetica, Arial, sans-serif"
           padding-left="25px"
           padding-right="25px">
-          <span style="color: #feeb35"> Здравейте {{firstName}}, </span>
+          <span style="color: #feeb35"> Здравейте, {{firstName}}, </span>
           <br /><br />
         </mj-text>
         <mj-text
@@ -35,11 +35,20 @@
           font-family="open Sans Helvetica, Arial, sans-serif"
           padding-left="25px"
           padding-right="25px">
-          Вашата кампания е създадена успешно! Вижте я
+          Благодарим Ви, че подадохте заявка за кампания на платформата Подкрепи.бг!<br />Можете да
+          я прегледате
           <a style="color: #feeb35" href="{{campaignApplicationLink}}" target="_blank">ТУК</a
-          >!<br /><br />
+          >.<br /><br />
 
-          Пожелаваме успешно набиране на средствата!
+          Искаме да Ви уверим, че заявката Ви е успешно получена и ще бъде разгледана от екипа ни в
+          най-кратък срок. Ако има нужда от допълнителна информация или уточнения, член на екип
+          „Кампании“ ще се свърже с Вас.<br /><br />
+
+          Междувременно, ако имате въпроси или желаете да предоставите допълнителни детайли за
+          кампанията, можете да се свържете с нас на следния имейл:
+          <a style="color: #feeb35" href="mailto:[email protected]" target="_blank"
+            >[email protected]</a
+          >. Благодарим Ви, че заедно правим добро!<br /><br />
         </mj-text>
         <mj-text
           align="left"
@@ -48,7 +57,7 @@
           font-family="open Sans Helvetica, Arial, sans-serif"
           padding-left="25px"
           padding-right="25px">
-          Поздрави, <br />
+          С уважение, <br />
           Екипът на Подкрепи.бг
         </mj-text>
       </mj-column>

diff --git a/apps/api/src/email/readme.email.md b/apps/api/src/email/readme.email.md
@@ -0,0 +1,27 @@
+# Email Template Service
+
+It gets the templates based on the name and the templates in the src/assets/templates.
+
+## Testing with adapter
+
+Why do we need the `template.service.spec-adapter.ts` when we have the `template.service.ts`?
+It's looking in a hardcoded path which is correct when the app is built and deployed but incorrect when running the tests. Hence we extend the base class with this for the tests.
+
+## Visualize the template before you ship the code
+
+- temporarily add a line like `writeFileSync('./rendered-template.html', rendered.html)` to your test (careful to not )
+- then open that with the browser i.e. `file:///C:/Users/gparl/Downloads/projects/podkrepi-bg-api/rendered-template.html` or on ubuntu under wsl `file://wsl.localhost/Ubuntu/home/gparlakov/projects/podkrepi-bg-api/rendered-template.html`
+- remember to delete that `writeFileSync` line and the `rendered-template.html` before you ship
+
+```ts
+const t = new CreateCampaignApplicationOrganizerEmailDto({
+  firstName: 'test',
+  email: 'test@email',
+  campaignApplicationLink: 'link',
+  campaignApplicationName: 'campaignApplicationName',
+})
+
+const rendered = await s.getTemplate(t)
+
+writeFileSync('./rendered-template.html', rendered.html)
+```
diff --git a/apps/api/src/email/template.service.spec-adapter.ts b/apps/api/src/email/template.service.spec-adapter.ts
@@ -0,0 +1,46 @@
+import { Logger } from '@nestjs/common'
+import { readFile } from 'fs/promises'
+import mjml from 'mjml'
+import path from 'path'
+
+import { EmailMetadata, TemplateType } from './template.interface'
+import { TemplateService } from './template.service'
+
+export class TemplateServiceSpecAdapter extends TemplateService {
+  /**
+   * Why do we need this when we have the template.service.ts?
+   * It's looking in a hardcoded path which is correct when the app is built and deployed but incorrect when running the tests.
+   * Hence we extend the base class with this for the tests.
+   *
+   * @param basePath where to look for the assets/templates/*.mjml files
+   */
+  constructor(private basePath: string) {
+    super()
+  }
+
+  protected async getEmailTemplate(templateName: TemplateType): Promise<ReturnType<typeof mjml>> {
+    try {
+      const file = await readFile(
+        path.resolve(this.basePath, `./assets/templates/${templateName}.mjml`),
+        { encoding: 'utf-8' },
+      )
+      return mjml(file)
+    } catch (error) {
+      Logger.error(`getEmailTemplate`, error)
+      throw error
+    }
+  }
+
+  protected async getEmailData(templateName: string): Promise<EmailMetadata> {
+    try {
+      const contents = await readFile(
+        path.resolve(this.basePath, `./assets/templates/${templateName}.json`),
+        { encoding: 'utf-8' },
+      )
+      return JSON.parse(contents)
+    } catch (error) {
+      Logger.error(`getEmailData`, error)
+      throw error
+    }
+  }
+}
diff --git a/apps/api/src/email/template.service.spec.ts b/apps/api/src/email/template.service.spec.ts
@@ -0,0 +1,247 @@
+import { CreateCampaignApplicationOrganizerEmailDto } from './template.interface'
+import { TemplateServiceSpecAdapter } from './template.service.spec-adapter'
+
+describe('Template service', () => {
+  let s: TemplateServiceSpecAdapter
+
+  beforeEach(() => {
+    s = new TemplateServiceSpecAdapter('./apps/api/src')
+  })
+
+  it('should render the campaign application email template', async () => {
+    const t = new CreateCampaignApplicationOrganizerEmailDto({
+      firstName: 'test',
+      email: 'test@email',
+      campaignApplicationLink: 'link',
+      campaignApplicationName: 'campaignApplicationName',
+    })
+
+    const rendered = await s.getTemplate(t)
+    // prettier-ignore-start
+    /* eslint-disable */
+    expect(rendered).toMatchInlineSnapshot(`
+      {
+        "html": "<!doctype html>
+      <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+        <head>
+          <title></title>
+          <!--[if !mso]><!-->
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+          <!--<![endif]-->
+          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <style type="text/css">
+            #outlook a { padding:0; }
+            body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
+            table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
+            img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
+            p { display:block;margin:13px 0; }
+          </style>
+          <!--[if mso]>
+          <noscript>
+          <xml>
+          <o:OfficeDocumentSettings>
+            <o:AllowPNG/>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+          </o:OfficeDocumentSettings>
+          </xml>
+          </noscript>
+          <![endif]-->
+          <!--[if lte mso 11]>
+          <style type="text/css">
+            .mj-outlook-group-fix { width:100% !important; }
+          </style>
+          <![endif]-->
+          
+            <!--[if !mso]><!-->
+              <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700" rel="stylesheet" type="text/css">
+              <style type="text/css">
+                @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700);
+              </style>
+            <!--<![endif]-->
+
+          
+          
+          <style type="text/css">
+            @media only screen and (min-width:480px) {
+              .mj-column-per-100 { width:100% !important; max-width: 100%; }
+            }
+          </style>
+          <style media="screen and (min-width:480px)">
+            .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
+          </style>
+          
+        
+          <style type="text/css">
+          
+          
+          </style>
+          <style type="text/css">
+          
+          </style>
+          
+        </head>
+        <body style="word-spacing:normal;background-color:#ffffff;">
+          
+          
+            <div
+               style="background-color:#ffffff;"
+            >
+              
+            
+            <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#009FE3" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+          
+            
+            <div  style="background:#009FE3;background-color:#009FE3;margin:0px auto;max-width:600px;">
+              
+              <table
+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#009FE3;background-color:#009FE3;width:100%;"
+              >
+                <tbody>
+                  <tr>
+                    <td
+                       style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0px;padding-top:0;text-align:center;"
+                    >
+                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+                  
+            <div
+               class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
+            >
+              
+            <table
+               border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
+            >
+              <tbody>
+                
+                    <tr>
+                      <td
+                         align="left" style="font-size:0px;padding:10px 25px;padding-top:50px;padding-right:25px;padding-bottom:30px;padding-left:25px;word-break:break-word;"
+                      >
+                        
+            <div
+               style="font-family:open Sans Helvetica, Arial, sans-serif;font-size:35px;font-weight:bold;line-height:1;text-align:left;color:#ffffff;"
+            >Потвърждение за получаване на заявка за дарителска кампания</div>
+          
+                      </td>
+                    </tr>
+                  
+              </tbody>
+            </table>
+          
+            </div>
+          
+                <!--[if mso | IE]></td></tr></table><![endif]-->
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              
+            </div>
+          
+            
+            <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#009fe3" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+          
+            
+            <div  style="background:#009fe3;background-color:#009fe3;margin:0px auto;max-width:600px;">
+              
+              <table
+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#009fe3;background-color:#009fe3;width:100%;"
+              >
+                <tbody>
+                  <tr>
+                    <td
+                       style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:20px;padding-top:20px;text-align:center;"
+                    >
+                      <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:middle;width:600px;" ><![endif]-->
+                  
+            <div
+               class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;"
+            >
+              
+            <table
+               border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%"
+            >
+              <tbody>
+                
+                    <tr>
+                      <td
+                         align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-left:25px;word-break:break-word;"
+                      >
+                        
+            <div
+               style="font-family:open Sans Helvetica, Arial, sans-serif;font-size:22px;line-height:1;text-align:left;color:#ffffff;"
+            ><span style="color: #feeb35"> Здравейте, test, </span>
+                <br /><br /></div>
+          
+                      </td>
+                    </tr>
+                  
+                    <tr>
+                      <td
+                         align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-left:25px;word-break:break-word;"
+                      >
+                        
+            <div
+               style="font-family:open Sans Helvetica, Arial, sans-serif;font-size:15px;line-height:1;text-align:left;color:#ffffff;"
+            >Благодарим Ви, че подадохте заявка за кампания на платформата Подкрепи.бг!<br />Можете да
+                я прегледате
+                <a style="color: #feeb35" href="link" target="_blank">ТУК</a
+                >.<br /><br />
+
+                Искаме да Ви уверим, че заявката Ви е успешно получена и ще бъде разгледана от екипа ни в
+                най-кратък срок. Ако има нужда от допълнителна информация или уточнения, член на екип
+                „Кампании“ ще се свърже с Вас.<br /><br />
+
+                Междувременно, ако имате въпроси или желаете да предоставите допълнителни детайли за
+                кампанията, можете да се свържете с нас на следния имейл:
+                <a style="color: #feeb35" href="mailto:[email protected]" target="_blank"
+                  >[email protected]</a
+                >. Благодарим Ви, че заедно правим добро!<br /><br /></div>
+          
+                      </td>
+                    </tr>
+                  
+                    <tr>
+                      <td
+                         align="left" style="font-size:0px;padding:10px 25px;padding-right:25px;padding-left:25px;word-break:break-word;"
+                      >
+                        
+            <div
+               style="font-family:open Sans Helvetica, Arial, sans-serif;font-size:15px;line-height:1;text-align:left;color:#ffffff;"
+            >С уважение, <br />
+                Екипът на Подкрепи.бг</div>
+          
+                      </td>
+                    </tr>
+                  
+              </tbody>
+            </table>
+          
+            </div>
+          
+                <!--[if mso | IE]></td></tr></table><![endif]-->
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              
+            </div>
+          
+            
+            <!--[if mso | IE]></td></tr></table><![endif]-->
+          
+          
+            </div>
+          
+        </body>
+      </html>
+        ",
+        "metadata": {
+          "subject": "Потвърждение за получаване на заявка за дарителска кампания ",
+        },
+      }
+    `)
+    /* eslint-enable */
+    // prettier-ignore-start
+  })
+})