feat: new provider - listmonk

Author: nevo-david

.env.example

@@ -50,6 +50,10 @@ GITHUB_CLIENT_ID=""
 GITHUB_CLIENT_SECRET=""
 BEEHIIVE_API_KEY=""
 BEEHIIVE_PUBLICATION_ID=""
+LISTMONK_DOMAIN=""
+LISTMONK_USER=""
+LISTMONK_API_KEY=""
+LISTMONK_LIST_ID=""
 THREADS_APP_ID=""
 THREADS_APP_SECRET=""
 FACEBOOK_APP_ID=""

apps/backend/src/services/auth/auth.service.ts

@@ -7,10 +7,10 @@ import { OrganizationService } from '@gitroom/nestjs-libraries/database/prisma/o
 import { AuthService as AuthChecker } from '@gitroom/helpers/auth/auth.service';
 import { ProvidersFactory } from '@gitroom/backend/services/auth/providers/providers.factory';
 import dayjs from 'dayjs';
-import { NewsletterService } from '@gitroom/nestjs-libraries/services/newsletter.service';
 import { NotificationService } from '@gitroom/nestjs-libraries/database/prisma/notifications/notification.service';
 import { ForgotReturnPasswordDto } from '@gitroom/nestjs-libraries/dtos/auth/forgot-return.password.dto';
 import { EmailService } from '@gitroom/nestjs-libraries/services/email.service';
+import { NewsletterService } from '@gitroom/nestjs-libraries/newsletter/newsletter.service';
 
 @Injectable()
 export class AuthService {

apps/frontend/public/icons/platforms/listmonk.png

@@ -258,6 +258,7 @@ export const CustomVariables: FC<{
   });
   const submit = useCallback(
     async (data: FieldValues) => {
+      modals.closeAll();
       gotoUrl(
         `/integrations/social/${identifier}?state=nostate&code=${Buffer.from(
           JSON.stringify(data)

apps/frontend/src/components/launches/add.provider.component.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import {
+  PostComment,
+  withProvider,
+} from '@gitroom/frontend/components/new-launch/providers/high.order.provider';
+import { ListmonkDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/listmonk.dto';
+import { Input } from '@gitroom/react/form/input';
+import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
+import { SelectList } from '@gitroom/frontend/components/new-launch/providers/listmonk/select.list';
+import { SelectTemplates } from '@gitroom/frontend/components/new-launch/providers/listmonk/select.templates';
+
+const SettingsComponent = () => {
+  const form = useSettings();
+
+  return (
+    <>
+      <Input label="Subject" {...form.register('subject')} />
+      <Input label="Preview" {...form.register('preview')} />
+      <SelectList {...form.register('list')} />
+      <SelectTemplates {...form.register('templates')} />
+    </>
+  );
+};
+
+export default withProvider({
+  postComment: PostComment.POST,
+  minimumCharacters: [],
+  SettingsComponent: SettingsComponent,
+  CustomPreviewComponent: undefined,
+  dto: ListmonkDto,
+  checkValidity: async (posts) => {
+    if (
+      posts.some(
+        (p) => p.some((a) => a.path.indexOf('mp4') > -1) && p.length > 1
+      )
+    ) {
+      return 'You can only upload one video per post.';
+    }
+
+    if (posts.some((p) => p.length > 4)) {
+      return 'There can be maximum 4 pictures in a post.';
+    }
+    return true;
+  },
+  maximumCharacters: 300000,
+});

apps/frontend/src/components/new-launch/providers/listmonk/listmonk.provider.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { FC, useEffect, useState } from 'react';
+import { Select } from '@gitroom/react/form/select';
+import { useT } from '@gitroom/react/translation/get.transation.service.client';
+import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function';
+import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
+export const SelectList: FC<{
+  name: string;
+  onChange: (event: {
+    target: {
+      value: string;
+      name: string;
+    };
+  }) => void;
+}> = (props) => {
+  const { onChange, name } = props;
+  const t = useT();
+  const customFunc = useCustomProviderFunction();
+  const [orgs, setOrgs] = useState([]);
+  const { getValues } = useSettings();
+  const [currentMedia, setCurrentMedia] = useState<string | undefined>();
+  const onChangeInner = (event: {
+    target: {
+      value: string;
+      name: string;
+    };
+  }) => {
+    setCurrentMedia(event.target.value);
+    onChange(event);
+  };
+  useEffect(() => {
+    customFunc.get('list').then((data) => setOrgs(data));
+    const settings = getValues()[props.name];
+    if (settings) {
+      setCurrentMedia(settings);
+    }
+  }, []);
+  if (!orgs.length) {
+    return null;
+  }
+  return (
+    <Select
+      name={name}
+      label="Select List"
+      onChange={onChangeInner}
+      value={currentMedia}
+    >
+      <option value="">{t('select_1', '--Select--')}</option>
+      {orgs.map((org: any) => (
+        <option key={org.id} value={org.id}>
+          {org.name}
+        </option>
+      ))}
+    </Select>
+  );
+};

apps/frontend/src/components/new-launch/providers/listmonk/select.list.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { FC, useEffect, useState } from 'react';
+import { Select } from '@gitroom/react/form/select';
+import { useT } from '@gitroom/react/translation/get.transation.service.client';
+import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function';
+import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
+export const SelectTemplates: FC<{
+  name: string;
+  onChange: (event: {
+    target: {
+      value: string;
+      name: string;
+    };
+  }) => void;
+}> = (props) => {
+  const { onChange, name } = props;
+  const t = useT();
+  const customFunc = useCustomProviderFunction();
+  const [orgs, setOrgs] = useState([]);
+  const { getValues } = useSettings();
+  const [currentMedia, setCurrentMedia] = useState<string | undefined>();
+  const onChangeInner = (event: {
+    target: {
+      value: string;
+      name: string;
+    };
+  }) => {
+    setCurrentMedia(event.target.value);
+    onChange(event);
+  };
+  useEffect(() => {
+    customFunc.get('templates').then((data) => setOrgs(data));
+    const settings = getValues()[props.name];
+    if (settings) {
+      setCurrentMedia(settings);
+    }
+  }, []);
+  if (!orgs.length) {
+    return null;
+  }
+  return (
+    <Select
+      name={name}
+      label="Select Template"
+      onChange={onChangeInner}
+      value={currentMedia}
+    >
+      <option value="">{t('select_1', '--Select--')}</option>
+      {orgs.map((org: any) => (
+        <option key={org.id} value={org.id}>
+          {org.name}
+        </option>
+      ))}
+    </Select>
+  );
+};

apps/frontend/src/components/new-launch/providers/listmonk/select.templates.tsx

@@ -31,6 +31,7 @@ import { Button } from '@gitroom/react/form/button';
 import { useT } from '@gitroom/react/translation/get.transation.service.client';
 import { PostComment } from '@gitroom/frontend/components/new-launch/providers/high.order.provider';
 import WordpressProvider from '@gitroom/frontend/components/new-launch/providers/wordpress/wordpress.provider';
+import ListmonkProvider from '@gitroom/frontend/components/new-launch/providers/listmonk/listmonk.provider';
 
 export const Providers = [
   {
@@ -133,6 +134,10 @@ export const Providers = [
     identifier: 'wordpress',
     component: WordpressProvider,
   },
+  {
+    identifier: 'listmonk',
+    component: ListmonkProvider,
+  },
 ];
 export const ShowAllProviders = forwardRef((props, ref) => {
   const { date, current, global, selectedIntegrations, allIntegrations } =

apps/frontend/src/components/new-launch/providers/show.all.providers.tsx

@@ -14,6 +14,7 @@ import { MediumSettingsDto } from '@gitroom/nestjs-libraries/dtos/posts/provider
 import { DevToSettingsDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/dev.to.settings.dto';
 import { HashnodeSettingsDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/hashnode.settings.dto';
 import { WordpressDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/wordpress.dto';
+import { ListmonkDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/listmonk.dto';
 
 export type ProviderExtension<T extends string, M> = { __type: T } & M;
 export type AllProvidersSettings =
@@ -34,6 +35,7 @@ export type AllProvidersSettings =
   | ProviderExtension<'devto', DevToSettingsDto>
   | ProviderExtension<'hashnode', HashnodeSettingsDto>
   | ProviderExtension<'wordpress', WordpressDto>
+  | ProviderExtension<'listmonk', ListmonkDto>
   | ProviderExtension<'facebook', None>
   | ProviderExtension<'threads', None>
   | ProviderExtension<'mastodon', None>
@@ -64,6 +66,7 @@ export const allProviders = (setEmpty?: any) => {
     { value: DevToSettingsDto, name: 'devto' },
     { value: WordpressDto, name: 'wordpress' },
     { value: HashnodeSettingsDto, name: 'hashnode' },
+    { value: ListmonkDto, name: 'listmonk' },
     { value: setEmpty, name: 'facebook' },
     { value: setEmpty, name: 'threads' },
     { value: setEmpty, name: 'mastodon' },

libraries/nestjs-libraries/src/dtos/posts/providers-settings/all.providers.settings.ts

@@ -0,0 +1,17 @@
+import { IsOptional, IsString, MinLength } from 'class-validator';
+
+export class ListmonkDto {
+  @IsString()
+  @MinLength(1)
+  subject: string;
+
+  @IsString()
+  preview: string;
+
+  @IsString()
+  list: string;
+
+  @IsString()
+  @IsOptional()
+  template: string;
+}