fix(user-notification): Fix email layout for outlook client #15460
Conversation
WalkthroughThe updates primarily involve enhancing the handling and rendering of image components in a notification and email service framework. Key changes include the introduction of an Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NotificationService
participant AdapterService
participant EmailTemplate
User->>NotificationService: Initiates notification with image or button
NotificationService->> AdapterService: Request to process component
AdapterService->> AdapterService: Checks component type
AdapterService->> EmailTemplate: Use `imagewithlink.hbs` if component is 'imagewithlink'
EmailTemplate->> AdapterService: Return rendered template
AdapterService->> NotificationService: Processed template
NotificationService-->User: Sends final notification output
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #15460 +/- ##
==========================================
- Coverage 37.02% 36.90% -0.13%
==========================================
Files 6557 6542 -15
Lines 134015 134339 +324
Branches 38367 38530 +163
==========================================
- Hits 49623 49577 -46
- Misses 84392 84762 +370
Flags with carried forward coverage won't be shown. Click here to find out more.
... and 145 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 11 Total Test Services: 0 Failed, 11 Passed Test ServicesThis report shows up to 10 services
🔻 Code Coverage Decreases vs Default Branch (1)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (3)
apps/services/user-notification/src/assets/images/en-button-open.pngis excluded by!**/*.pngapps/services/user-notification/src/assets/images/is-button-open.pngis excluded by!**/*.pngapps/services/user-notification/src/assets/images/island-2x-logo.pngis excluded by!**/*.png
Files selected for processing (8)
- apps/services/user-notification/src/app/modules/notifications/notificationsWorker/notificationsWorker.service.spec.ts (6 hunks)
- apps/services/user-notification/src/app/modules/notifications/notificationsWorker/notificationsWorker.service.ts (2 hunks)
- libs/email-service/src/tools/adapter.service.ts (1 hunks)
- libs/email-service/src/tools/design/foundation.hbs (1 hunks)
- libs/email-service/src/tools/design/image.hbs (1 hunks)
- libs/email-service/src/tools/design/imagewithlink.hbs (1 hunks)
- libs/email-service/src/tools/design/styles.hbs (3 hunks)
- libs/email-service/src/types/index.ts (2 hunks)
Files skipped from review due to trivial changes (4)
- apps/services/user-notification/src/app/modules/notifications/notificationsWorker/notificationsWorker.service.spec.ts
- libs/email-service/src/tools/design/foundation.hbs
- libs/email-service/src/tools/design/image.hbs
- libs/email-service/src/tools/design/imagewithlink.hbs
Additional context used
Path-based instructions (4)
libs/email-service/src/types/index.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/email-service/src/tools/adapter.service.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/email-service/src/tools/design/styles.hbs (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/services/user-notification/src/app/modules/notifications/notificationsWorker/notificationsWorker.service.ts (2)
Pattern
apps/services/**/*: "Confirm that the code adheres to the following:
- NestJS architecture, including modules, services, and controllers.
- Dependency injection patterns and service encapsulation.
- Integration and unit testing coverage and practices."
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Additional comments not posted (6)
libs/email-service/src/types/index.ts (2)
83-91: Addition ofImageWithLinkComponentinterface looks good.The new interface is well-defined and consistent with the existing component interfaces.
103-103: Inclusion ofImageWithLinkComponentinBodytype looks good.This change ensures that the new component type can be used within the email template body.
libs/email-service/src/tools/adapter.service.ts (1)
81-81: Modification ofbuildBodymethod to handleimagewithlinkcomponent type looks good.The change is consistent with the existing logic for handling image components.
libs/email-service/src/tools/design/styles.hbs (1)
292-292: Update to.tagclass looks good.The addition of
justify-content: center;ensures that the content within the.tagclass is centered horizontally.apps/services/user-notification/src/app/modules/notifications/notificationsWorker/notificationsWorker.service.ts (2)
146-148: Update to useImageWithLinkcomponent looks good.The component property has been updated to use the new
ImageWithLinkcomponent with a dynamic image source based on the language and corresponding button text.
174-182: Dynamic image source based on language looks good.The dynamic image source based on the language (
enoris) and corresponding button text is correctly implemented.
GunnlaugurG
added
the
deprecated:automerge
* image with link instead of button cta * remove tag-bg * fix horizontal spacing on email * fix tests
What
Email layout is a bit off in old outlook versions since it uses Word to render HTML.
Using images instead of highly css-ed components allows them to look them same on all email clients
Why
To make emails look the same on all email clients
Screenshots / Gifs
Attach Screenshots / Gifs to help reviewers understand the scope of the pull request
Checklist:
Summary by CodeRabbit
New Features
ImageWithLinkcomponent for enhanced email templates with dynamic image sources and hyperlinks.Improvements
Bug Fixes