Feat/integrations

apps/api/src/app/project/usecases/create-project/create-project.usecase.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common';
 import { ProjectRepository } from '@impler/dal';
-import { ColumnTypesEnum } from '@impler/shared';
+import { ColumnTypesEnum, IntegrationEnum } from '@impler/shared';
 
 import { CreateProjectCommand } from './create-project.command';
 import { CreateEnvironment } from 'app/environment/usecases';
@@ -38,6 +38,7 @@ export class CreateProject {
       _projectId,
       chunkSize: 100,
       name: 'Sales Data Import',
+      integration: IntegrationEnum.JAVASCRIPT,
     });
     await this.updateTemplateColumns.execute(
       [

apps/api/src/app/template/dtos/create-template-request.dto.ts

@@ -1,6 +1,6 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { Defaults } from '@impler/shared';
-import { IsDefined, IsString, IsNumber, IsUrl, IsOptional, IsMongoId } from 'class-validator';
+import { Defaults, IntegrationEnum } from '@impler/shared';
+import { IsDefined, IsString, IsNumber, IsUrl, IsOptional, IsMongoId, IsEnum } from 'class-validator';
 
 export class CreateTemplateRequestDto {
   @ApiProperty({
@@ -10,6 +10,14 @@ export class CreateTemplateRequestDto {
   @IsDefined()
   name: string;
 
+  @ApiProperty({
+    description: 'Where do the user wanted to integrate the import',
+  })
+  @IsEnum(IntegrationEnum)
+  @IsOptional()
+  @IsDefined()
+  integration: IntegrationEnum;
+
   @ApiProperty({
     description: 'Callback URL of the template, gets called when sending data to the application',
   })

apps/api/src/app/template/dtos/template-response.dto.ts

@@ -1,5 +1,6 @@
+import { IntegrationEnum } from '@impler/shared';
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
-import { IsDefined, IsNumber, IsString } from 'class-validator';
+import { IsDefined, IsEnum, IsNumber, IsOptional, IsString } from 'class-validator';
 
 export class TemplateResponseDto {
   @ApiPropertyOptional({
@@ -16,6 +17,14 @@ export class TemplateResponseDto {
   @IsDefined()
   name: string;
 
+  @ApiProperty({
+    description: 'Where do the user wanted to integrate the import',
+  })
+  @IsOptional()
+  @IsEnum(IntegrationEnum)
+  @IsDefined()
+  integration: IntegrationEnum;
+
   @ApiProperty({
     description: 'URL to download samle csv file',
   })

apps/api/src/app/template/dtos/update-template-request.dto.ts

@@ -1,5 +1,6 @@
+import { IntegrationEnum } from '@impler/shared';
 import { ApiProperty } from '@nestjs/swagger';
-import { IsOptional } from 'class-validator';
+import { IsEnum, IsOptional } from 'class-validator';
 
 export class UpdateTemplateRequestDto {
   @ApiProperty({
@@ -15,4 +16,12 @@ export class UpdateTemplateRequestDto {
   })
   @IsOptional()
   mode?: string;
+
+  @ApiProperty({
+    description: 'Update Where do the user wanted to integrate the import',
+    nullable: true,
+  })
+  @IsOptional()
+  @IsEnum(IntegrationEnum)
+  integration?: IntegrationEnum;
 }

apps/api/src/app/template/template.controller.ts

@@ -17,7 +17,7 @@ import {
 } from '@nestjs/common';
 
 import { UploadEntity } from '@impler/dal';
-import { ACCESS_KEY_NAME, IJwtPayload } from '@impler/shared';
+import { ACCESS_KEY_NAME, IJwtPayload, IntegrationEnum } from '@impler/shared';
 import { JwtAuthGuard } from '@shared/framework/auth.gaurd';
 import { ValidateMongoId } from '@shared/validations/valid-mongo-id.validation';
 import { DocumentNotFoundException } from '@shared/exceptions/document-not-found.exception';
@@ -150,6 +150,7 @@ export class TemplateController {
         callbackUrl: body.callbackUrl,
         chunkSize: body.chunkSize,
         name: body.name,
+        integration: body.integration as IntegrationEnum,
       })
     );
   }

apps/api/src/app/template/usecases/create-template/create-template.command.ts

@@ -1,11 +1,17 @@
-import { IsDefined, IsString, IsNumber, IsOptional } from 'class-validator';
+import { IsDefined, IsString, IsNumber, IsOptional, IsEnum } from 'class-validator';
 import { BaseCommand } from '@shared/commands/base.command';
+import { IntegrationEnum } from '@impler/shared';
 
 export class CreateTemplateCommand extends BaseCommand {
   @IsDefined()
   @IsString()
   name: string;
 
+  @IsOptional()
+  @IsOptional()
+  @IsEnum(IntegrationEnum)
+  integration: IntegrationEnum;
+
   @IsString()
   @IsOptional()
   callbackUrl?: string;

apps/api/src/app/template/usecases/get-template-details/get-template-details.usecase.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { TemplateRepository } from '@impler/dal';
 import { TemplateResponseDto } from 'app/template/dtos/template-response.dto';
 import { DocumentNotFoundException } from '@shared/exceptions/document-not-found.exception';
+import { IntegrationEnum } from '@impler/shared';
 
 @Injectable()
 export class GetTemplateDetails {
@@ -10,7 +11,7 @@ export class GetTemplateDetails {
   async execute(_id: string): Promise<TemplateResponseDto> {
     const template = await this.templateRepository.findOne(
       { _id },
-      '_projectId name sampleFileUrl _id totalUploads totalInvalidRecords totalRecords mode'
+      '_projectId name sampleFileUrl _id totalUploads totalInvalidRecords totalRecords mode integration'
     );
     if (!template) {
       throw new DocumentNotFoundException('Template', _id);
@@ -25,6 +26,7 @@ export class GetTemplateDetails {
       totalInvalidRecords: template.totalInvalidRecords,
       totalRecords: template.totalRecords,
       mode: template.mode,
+      integration: template.integration as IntegrationEnum,
     };
   }
 }

apps/api/src/app/template/usecases/update-template/update-template.command.ts

@@ -1,5 +1,6 @@
-import { IsString, IsOptional, IsMongoId } from 'class-validator';
+import { IsString, IsOptional, IsMongoId, IsEnum } from 'class-validator';
 import { BaseCommand } from '@shared/commands/base.command';
+import { IntegrationEnum } from '@impler/shared';
 
 export class UpdateTemplateCommand extends BaseCommand {
   @IsString()
@@ -15,4 +16,8 @@ export class UpdateTemplateCommand extends BaseCommand {
   @IsString()
   @IsOptional()
   mode?: string;
+
+  @IsEnum(IntegrationEnum)
+  @IsOptional()
+  integration?: IntegrationEnum;
 }

apps/web/assets/icons/Angular.icon.tsx

@@ -0,0 +1,17 @@
+import { IconType } from '@types';
+import { IconSizes } from 'config';
+
+export const AngularIcon = ({ size = 'lg' }: IconType) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={IconSizes[size]} height={IconSizes[size]} fill="none">
+    <g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M5.42872 17.7454L11.5047 21.2164C11.6558 21.3027 11.8267 21.3481 12.0007 21.3481C12.1747 21.3481 12.3457 21.3027 12.4967 21.2164L18.5727 17.7454C18.706 17.6693 18.82 17.5635 18.9059 17.4362C18.9917 17.3089 19.0471 17.1636 19.0677 17.0114L20.3907 7.30744C20.4218 7.07949 20.3733 6.84779 20.2534 6.65142C20.1336 6.45505 19.9497 6.30602 19.7327 6.22944L12.3327 3.61744C12.1175 3.54158 11.8829 3.54158 11.6677 3.61744L4.26872 6.23044C4.05178 6.30702 3.86787 6.45605 3.74801 6.65242C3.62815 6.84879 3.57966 7.08049 3.61072 7.30844L4.93372 17.0124C4.95435 17.1646 5.00973 17.3099 5.09557 17.4372C5.18141 17.5645 5.2954 17.6693 5.42872 17.7454Z" />
+      <path d="M9 15.5L12 7.5L15 15.5" />
+      <path d="M10 13.5H14" />
+    </g>
+    <defs>
+      <clipPath id="clip0_4865_2955">
+        <rect width="24" height="24" fill="white" transform="translate(0 0.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);

apps/web/assets/icons/Bubble.icon.tsx

@@ -0,0 +1,27 @@
+import { IconType } from '@types';
+import { IconSizes } from 'config';
+
+export const BubbleIcon = ({ size = 'lg' }: IconType) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={IconSizes[size]} height={IconSizes[size]} fill="none">
+      <g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path
+          d="M13.5415 7.97067C11.994 7.97067 10.4688 8.63503 9.30432 9.94119V3.5H7V14.3441C7 14.3444 7 14.3447 7 14.345C7 17.8653 9.85382 20.7192 13.3742 20.7192C16.8946 20.7192 19.7485 17.8653 19.7485 14.345C19.7485 10.8246 17.0619 7.97067 13.5415 7.97067ZM13.3742 18.264C11.2098 18.264 9.45507 16.5094 9.45507 14.3449C9.45507 12.1804 11.2098 10.4257 13.3742 10.4257C15.5387 10.4257 17.2934 12.1804 17.2934 14.3449C17.2934 16.5094 15.5387 18.264 13.3742 18.264Z"
+          fill="currentColor"
+        />
+        <path
+          d="M5.32625 17.5664C4.45569 17.5664 3.75 18.2721 3.75 19.1427C3.75 20.0132 4.45569 20.7189 5.32625 20.7189C6.19681 20.7189 6.90249 20.0132 6.90249 19.1427C6.90249 18.2721 6.19681 17.5664 5.32625 17.5664Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4865_2964">
+          <rect width="24" height="24" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+        <clipPath id="clip1_4865_2964">
+          <rect width="16" height="17.25" fill="white" transform="translate(3.75 3.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

apps/web/assets/icons/Integration.icon.tsx

@@ -0,0 +1,46 @@
+import { IconType } from '@types';
+import { IconSizes } from 'config';
+
+export const IntegrationIcon = ({ size = 'lg' }: IconType) => {
+  return (
+    <svg
+      fill="none"
+      strokeWidth="2"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width={IconSizes[size]}
+      height={IconSizes[size]}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_4865_3178)">
+        <path
+          d="M5.83333 7.16602L2.5 10.4993L5.83333 13.8327"
+          stroke="white"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.168 7.16602L17.5013 10.4993L14.168 13.8327"
+          stroke="white"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M11.6654 3.83398L8.33203 17.1673"
+          stroke="white"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4865_3178">
+          <rect width="20" height="20" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

apps/web/assets/icons/Javascript.icon.tsx

@@ -0,0 +1,18 @@
+import { IconType } from '@types';
+import { IconSizes } from 'config';
+
+export const JavaScriptIcon = ({ size = 'lg' }: IconType) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={IconSizes[size]} height={IconSizes[size]} fill="none">
+      <g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M20 4.5 18 19l-6 2-6-2L4 4.5h16Z" />
+        <path d="M7.5 8.5h3v8l-2-1M16.5 8.5H14c-.1326 0-.2598.05268-.3536.14645-.0937.09376-.1464.22094-.1464.35355v3c0 .1326.0527.2598.1464.3536.0938.0937.221.1464.3536.1464h1.423c.0716 0 .1423.0154.2074.0451.0651.0297.1231.073.17.1271.047.054.0817.1175.102.1861s.0256.1408.0156.2117L15.5 16l-2 .5" />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="currentColor" transform="translate(0 .5)" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

apps/web/assets/icons/React.icon.tsx

@@ -0,0 +1,18 @@
+import { IconType } from '@types';
+import { IconSizes } from 'config';
+
+export const ReactIcon = ({ size = 'lg' }: IconType) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={IconSizes[size]} height={IconSizes[size]} fill="none">
+    <g clipPath="url(#a)" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6.306 9.21094C3.704 9.93394 2 11.1369 2 12.4999c0 2.21 4.477 4 10 4 .773 0 1.526-.035 2.248-.102" />
+      <path d="M17.692 15.789C20.295 15.067 22 13.863 22 12.5c0-2.21-4.477-4-10-4-.773 0-1.526.035-2.25.102" />
+      <path d="M6.30633 15.787c-.676 2.615-.485 4.693.695 5.373 1.913 1.105 5.70297-1.877 8.46397-6.66.387-.67.733-1.339 1.036-2M17.695 9.21544c.677-2.616.487-4.696-.694-5.376-1.913-1.105-5.703 1.877-8.464 6.65996-.387.67-.733 1.34-1.037 2" />
+      <path d="M12.0013 5.92358c-1.925-1.892-3.81997-2.766-4.99997-2.084-1.913 1.104-1.226 5.877 1.536 10.66002.386.67.793 1.304 1.212 1.896M12 19.0745c1.926 1.893 3.821 2.768 5 2.086 1.913-1.104 1.226-5.877-1.536-10.66-.375-.64998-.78-1.28298-1.212-1.89698M11.4982 13.3666c.1137.0667.2396.1102.3702.1281.1307.0179.2636.0097.3911-.024s.2471-.0923.3518-.1724c.1048-.0801.1927-.1802.2586-.2944.066-.1142.1087-.2403.1257-.3711.017-.1308.0079-.2636-.0266-.3909-.0346-.1273-.094-.2465-.1748-.3507-.0808-.1042-.1814-.1914-.296-.2566-.2296-.1305-.5015-.1649-.7563-.0958-.2548.0692-.472.2364-.604.4651-.132.2287-.1683.5003-.1008.7556.0675.2553.2333.4735.4611.6071Z" />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="currentColor" transform="translate(0 .5)" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);

apps/web/components/Integration/ContentBlock.tsx

@@ -0,0 +1,21 @@
+import dynamic from 'next/dynamic';
+import { IntegrationLanguage } from '@config';
+import { Suspense } from 'react';
+import { LoadingOverlay } from '@mantine/core';
+
+type CodeBlockProps = {
+  code: string;
+  language?: IntegrationLanguage;
+};
+
+const Prism = dynamic(() => import('@mantine/prism').then((mod) => mod.Prism));
+
+export const CodeBlock = ({ code, language = 'javascript' }: CodeBlockProps) => (
+  <div style={{ position: 'relative', marginTop: 10 }}>
+    <Suspense fallback={<LoadingOverlay visible />}>
+      <Prism language={language} copyLabel="Copy code" copiedLabel="Copied!">
+        {code.trim()}
+      </Prism>
+    </Suspense>
+  </div>
+);