Mailer/Hbs : Translationd works but only show fallback language

[SteveG-tkorp]

Hello,

I implemented this library in my project's nestJs Mailer Service using HandleBarsAdapter, but it seems I misconfigured it, because translations works but does not take in account the lang passed to the mail service.

// app.module.ts 
...
    I18nModule.forRoot({
      fallbackLanguage: 'fr',
      loaderOptions: { path: join(__dirname, '/i18n/'), watch: true },
      throwOnMissingKey: true,
      logging: true,
      resolvers: [{ use: AcceptLanguageResolver, options: ['lang'] }]
    }),
...

// mail.module.ts
import { Module } from '@nestjs/common';
import { MailService } from './mail.service';
import { MailController } from './mail.controller';
import { MailerModule } from '@nestjs-modules/mailer';
import { HandlebarsAdapter } from '@nestjs-modules/mailer/dist/adapters/handlebars.adapter';
import { ConfigModule } from '@nestjs/config';
import { User } from '@src/users/entities/user.entity';
import { TypeOrmModule } from '@nestjs/typeorm';
import { join } from 'path';
import { I18nService } from 'nestjs-i18n';

const path = join(__dirname, 'templates');
@Module({
  imports: [
    ConfigModule.forRoot(),
    MailerModule.forRootAsync({
      inject: [I18nService],
      useFactory: (i18n: I18nService) => ({
        transport: {
          host: process.env.EMAIL_HOST,
          secure: false,
          auth: {
            user: process.env.EMAIL_SENDER,
            pass: process.env.EMAIL_PWD
          }
        },
        defaults: {
          from: `"${process.env.EMAIL_PREFIX} No Reply" <${process.env.EMAIL_SENDER}>`
        },
        template: {
          dir: join(path, 'mails'),
          adapter: new HandlebarsAdapter({
            t: i18n.hbsHelper
          }),
          options: { strict: true }
        },
        options: {
          partials: {
            dir: join(path, 'layouts'),
            options: {
              strict: true
            }
          }
        }
      })
    }),
    TypeOrmModule.forFeature([User])
  ],

  providers: [MailService],
  controllers: [MailController],
  exports: [MailService]
})
export class MailModule {}

// mail.service.ts
  async sendUserInvitationToJoinOrganization(
    user: User,
    organization: Organization,
    token: string,
    lang?: string
  ) {
    const subject: string = this.i18nService.translate(
      'default.invitation_organization',
      {
        lang,
        args: { organizationName: organization.name }
      }
    );

    await this.mailerService.sendMail({
      to: user.email,
      subject: `${process.env.EMAIL_PREFIX} ${subject}`,
      template: 'invitation',
      context: {
        name: user.firstName,
        url: this.constructUrl('invitation', { token }),
        organization,
        lang
      }
    });
  }

If I switch the fallback language option, internationalization works well !

AI suggests to replace

adapter: new HandlebarsAdapter({
            t: i18n.hbsHelper
          }),

by

t: (key: string, options?: Record<string, any>) => {
              const lang = options?.hash?.lang || 'en';
              return i18n.translate(key, { lang });
            }

and it indeed works but it does feel weird, plus I need to add arguments into this, or none of my arguments are interpreted.

If that helps, I can tell you that the option logging: true doesn't seems to work either...

Thanks by advance for your help

[entbhonemyintmo]

In my case, it works when I pass i18nLang instead of lang when calling the t helper function in the hbs template.

When I use lang, it always translates with the fallbackLanguage. However, I'm unsure if this is the proper approach.

Could someone please clarify this issue, as I'm experiencing the same problem?

nestjs-i18n

I18nModule.forRoot({
            fallbackLanguage: 'en',
            loaderOptions: {
                path: path.join(__dirname, '/i18n/'),
                watch: true,
            },
            resolvers: [CustomeResolver],
        })

@nestjs-modules/mailer

 MailerModule.forRootAsync({
      imports: [ConfigModule],
      useFactory: async (configService: ConfigService, i18n: I18nService) => ({
        defaults: {
          from: configService.get('MAIL_USER'),
        },
        transport: {
          host: configService.get('MAIL_HOST'),
          port: parseInt(configService.get('MAIL_PORT')),
          auth: {
            user: configService.get('MAIL_USER'),
            pass: configService.get('MAIL_PASSWORD'),
          },
        },
        template: {
          dir: path.join(__dirname, 'email/email-template/templates'),
          adapter: new HandlebarsAdapter({...registerHandlebarsHelpers, t: i18n.hbsHelper}, {
            inlineCssEnabled: true,
          }),
          options: {
            strict: true,
          },
        },
        
      }),
      inject: [ConfigService, I18nService],
    })

mailing.service

 this.email.sendMail({
            subject: data.email_subject,
            to: data.to,
            template: 'interview-scheduling/invite-candidate',
            context: {
                ...data,
                i18nLang: 'mm',
            },
        });

in hbs template

<p class="text-primary" style="font-size: 14px;">
                                {{t 'interview-scheduling-noti.footer_text' i18nLang}}
                                <br />
                                {{#each email}}
                                <a href="mailto:{{this}}" class="text-link">{{this}}</a>{{#unless @last}}, {{/unless}}
                                {{/each}}
                            </p>

[SteveG-tkorp]

Additionnaly, I need to set the lang argument on every translated parts of my templates, which is frustrating :

{{#> external}}
<div class='h-screen w-full flex justify-between mb-4'>
  <div class='flex flex-col justify-between items-center'>
    <h2>{{t "default.welcome" lang=lang}}</h2>
    <p>{{t "default.account_validated" lang=lang}}</p>
    <p>{{t "default.ready_to_explore" lang=lang}}</p>
    {{> confirm label=(t "default.start_pulse" lang=lang)}}
  </div>
</div>
{{/external}}