Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte 5 evlim #163

Merged
merged 22 commits into from
Nov 3, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add a tbody.
This isn't ideal as we're diverting from the tested template... but I'll test it.

Should ideally remove if this is fixed: sveltejs/svelte#9785
scosman committed Nov 1, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 920f3f446c15d5e0cc9e08e4170f41ddc2d918bd
319 changes: 162 additions & 157 deletions src/lib/emails/welcome_email_html.svelte
Original file line number Diff line number Diff line change
@@ -116,177 +116,182 @@
width="100%"
bgcolor="#f4f5f6"
>
<tr>
<td
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top;"
valign="top">&nbsp;</td
>
<td
class="container"
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; max-width: 600px; padding: 0; padding-top: 24px; width: 600px; margin: 0 auto;"
width="600"
valign="top"
>
<div
class="content"
style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px; padding: 0;"
<tbody>
<tr>
<td
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top;"
valign="top">&nbsp;</td
>
<td
class="container"
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; max-width: 600px; padding: 0; padding-top: 24px; width: 600px; margin: 0 auto;"
width="600"
valign="top"
>
<!-- START CENTERED WHITE CONTAINER -->
<span
class="preheader"
style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"
>Welcome to {companyName}. We're excited to have you on board.</span
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
class="main"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border: 1px solid #eaebed; border-radius: 16px; width: 100%;"
width="100%"
>
<!-- START MAIN CONTENT AREA -->
<tr>
<td
class="wrapper"
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; box-sizing: border-box; padding: 24px;"
valign="top"
>
<p
style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
>
Welcome to {companyName}!
</p>
<p
style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
>
This is a quick sample of a welcome email. You can customize
this email to fit your needs.
</p>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
class="btn btn-primary"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; min-width: 100%;"
width="100%"
>
<tbody>
<tr>
<td
align="left"
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; padding-bottom: 16px;"
valign="top"
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"
>
<tbody>
<tr>
<td
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; border-radius: 4px; text-align: center; background-color: #0867ec;"
valign="top"
align="center"
>
<a
href="https://github.com/CriticalMoments/CMSaasStarter"
target="_blank"
style="border: solid 2px #0867ec; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; margin: 0; padding: 12px 24px; text-decoration: none; text-transform: capitalize; background-color: #0867ec; border-color: #0867ec; color: #ffffff;"
>View SaaS Starter Docs</a
>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p
style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
>
Thanks for using {companyName}!
</p>
</td>
</tr>

<!-- END MAIN CONTENT AREA -->
</table>

<!-- START FOOTER -->
<div
class="footer"
style="clear: both; padding-top: 24px; text-align: center; width: 100%;"
class="content"
style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 600px; padding: 0;"
>
<!-- START CENTERED WHITE CONTAINER -->
<span
class="preheader"
style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"
>Welcome to {companyName}. We're excited to have you on board.</span
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;"
class="main"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border: 1px solid #eaebed; border-radius: 16px; width: 100%;"
width="100%"
>
<tr>
<td
class="content-block"
style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 16px; text-align: center;"
valign="top"
align="center"
>
<span
class="apple-link"
style="color: #9a9ea6; font-size: 16px; text-align: center;"
>Company Inc, 123 Main St, Toronto, Canada</span
>
</td>
</tr>
<tr>
<td
class="content-block powered-by"
style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 16px; text-align: center;"
valign="top"
align="center"
>
Email Template by <a
href="http://htmlemail.io"
style="color: #9a9ea6; font-size: 16px; text-align: center; text-decoration: none;"
>HTMLemail.io</a
>
</td>
</tr>
<tr>
<td
class="content-block"
style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 14px; text-align: center;"
valign="top"
align="center"
>
<a
href="{WebsiteBaseUrl}/account/settings/change_email_subscription"
style="color: #4382ff; font-size: 16px; text-align: center; text-decoration: underline;"
>Unsubscribe</a
<!-- START MAIN CONTENT AREA -->
<tbody>
<tr>
<td
class="wrapper"
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; box-sizing: border-box; padding: 24px;"
valign="top"
>
</td>
</tr>
<p
style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
>
Welcome to {companyName}!
</p>
<p
style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
>
This is a quick sample of a welcome email. You can
customize this email to fit your needs.
</p>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
class="btn btn-primary"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; box-sizing: border-box; width: 100%; min-width: 100%;"
width="100%"
>
<tbody>
<tr>
<td
align="left"
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; padding-bottom: 16px;"
valign="top"
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"
>
<tbody>
<tr>
<td
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top; border-radius: 4px; text-align: center; background-color: #0867ec;"
valign="top"
align="center"
>
<a
href="https://github.com/CriticalMoments/CMSaasStarter"
target="_blank"
style="border: solid 2px #0867ec; border-radius: 4px; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 16px; font-weight: bold; margin: 0; padding: 12px 24px; text-decoration: none; text-transform: capitalize; background-color: #0867ec; border-color: #0867ec; color: #ffffff;"
>View SaaS Starter Docs</a
>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider making the documentation URL configurable.

The button URL is currently hardcoded to the GitHub repository. Consider making this configurable through props for better maintainability and reusability.

 <script lang="ts">
   import { WebsiteBaseUrl } from "../../config"
+  export let docsUrl = "https://github.com/CriticalMoments/CMSaasStarter"
 </script>

-<a href="https://github.com/CriticalMoments/CMSaasStarter"
+<a href={docsUrl}

Committable suggestion skipped: line range outside the PR's diff.

</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p
style="font-family: Helvetica, sans-serif; font-size: 16px; font-weight: normal; margin: 0; margin-bottom: 16px;"
>
Thanks for using {companyName}!
</p>
</td>
</tr>
</tbody>
<!-- END MAIN CONTENT AREA -->
</table>
</div>

<!-- END FOOTER -->
<!-- START FOOTER -->
<div
class="footer"
style="clear: both; padding-top: 24px; text-align: center; width: 100%;"
>
<table
role="presentation"
border="0"
cellpadding="0"
cellspacing="0"
style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;"
width="100%"
>
<tbody>
<tr>
<td
class="content-block"
style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 16px; text-align: center;"
valign="top"
align="center"
>
<span
class="apple-link"
style="color: #9a9ea6; font-size: 16px; text-align: center;"
>Company Inc, 123 Main St, Toronto, Canada</span
>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider making company details configurable.

The company address is currently hardcoded. Consider making it configurable through props for better reusability.

 <script lang="ts">
   interface Props {
     companyName: string;
+    companyAddress?: string;
   }
+  export let companyAddress = "Company Inc, 123 Main St, Toronto, Canada"
 </script>

-<span class="apple-link">Company Inc, 123 Main St, Toronto, Canada</span>
+<span class="apple-link">{companyAddress}</span>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span
class="apple-link"
style="color: #9a9ea6; font-size: 16px; text-align: center;"
>Company Inc, 123 Main St, Toronto, Canada</span
>
<script lang="ts">
interface Props {
companyName: string;
companyAddress?: string;
}
export let companyAddress = "Company Inc, 123 Main St, Toronto, Canada"
</script>
<span
class="apple-link"
style="color: #9a9ea6; font-size: 16px; text-align: center;"
>{companyAddress}</span
>

</td>
</tr>
<tr>
<td
class="content-block powered-by"
style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 16px; text-align: center;"
valign="top"
align="center"
>
Email Template by <a
href="http://htmlemail.io"
style="color: #9a9ea6; font-size: 16px; text-align: center; text-decoration: none;"
>HTMLemail.io</a
>
</td>
</tr>
<tr>
<td
class="content-block"
style="font-family: Helvetica, sans-serif; vertical-align: top; color: #9a9ea6; font-size: 14px; text-align: center;"
valign="top"
align="center"
>
<a
href="{WebsiteBaseUrl}/account/settings/change_email_subscription"
style="color: #4382ff; font-size: 16px; text-align: center; text-decoration: underline;"
>Unsubscribe</a
>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider making the unsubscribe path configurable.

The unsubscribe URL path is hardcoded. Consider making it configurable to support different routing structures.

 <script lang="ts">
+  export let unsubscribePath = "/account/settings/change_email_subscription"
 </script>

-<a href="{WebsiteBaseUrl}/account/settings/change_email_subscription"
+<a href="{WebsiteBaseUrl}{unsubscribePath}"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<a
href="{WebsiteBaseUrl}/account/settings/change_email_subscription"
style="color: #4382ff; font-size: 16px; text-align: center; text-decoration: underline;"
>Unsubscribe</a
>
<script lang="ts">
export let unsubscribePath = "/account/settings/change_email_subscription"
</script>
<a
href="{WebsiteBaseUrl}{unsubscribePath}"
style="color: #4382ff; font-size: 16px; text-align: center; text-decoration: underline;"
>Unsubscribe</a
>

</td>
</tr>
</tbody>
</table>
</div>

<!-- END FOOTER -->

<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top;"
valign="top">&nbsp;</td
>
</tr>
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td
style="font-family: Helvetica, sans-serif; font-size: 16px; vertical-align: top;"
valign="top">&nbsp;</td
>
</tr>
</tbody>
</table>
</body>
</html>

Unchanged files with check annotations Beta

template_properties: {},
})
expect(mockSend).toHaveBeenCalled()

Check failure on line 63 in src/lib/mailer.test.ts

GitHub Actions / Tests

src/lib/mailer.test.ts > mailer > sendUserEmail > sends welcome email

AssertionError: expected "spy" to be called at least once ❯ src/lib/mailer.test.ts:63:24
const email = mockSend.mock.calls[0][0]
expect(email.to).toEqual(["user@example.com"])
})
template_properties: {},
})
expect(mockSend).toHaveBeenCalled()

Check failure on line 112 in src/lib/mailer.test.ts

GitHub Actions / Tests

src/lib/mailer.test.ts > mailer > sendTemplatedEmail > sends templated email

AssertionError: expected "spy" to be called at least once ❯ src/lib/mailer.test.ts:112:24
const email = mockSend.mock.calls[0][0]
expect(email.from).toEqual("from@example.com")
expect(email.to).toEqual(["to@example.com"])