feat: Meged next into current

apps/api/package.json

@@ -19,6 +19,7 @@
     "test": "cross-env TZ=UTC NODE_ENV=test E2E_RUNNER=true mocha --timeout 10000 --require ts-node/register --exit"
   },
   "dependencies": {
+    "@amplitude/analytics-node": "^1.3.6",
     "@impler/client": "workspace:^",
     "@impler/dal": "workspace:^",
     "@impler/services": "workspace:^",

apps/api/src/app/review/review.module.ts

@@ -5,10 +5,11 @@ import { SharedModule } from '@shared/shared.module';
 import { AJVService } from './service/AJV.service';
 import { Sandbox, SManager } from '../shared/services/sandbox';
 import { QueueService } from '@shared/services/queue.service';
+import { AmplitudeService } from '@shared/services/amplitude.service';
 
 @Module({
   imports: [SharedModule],
-  providers: [...USE_CASES, AJVService, QueueService, SManager, Sandbox],
+  providers: [...USE_CASES, AJVService, QueueService, SManager, Sandbox, AmplitudeService],
   controllers: [ReviewController],
 })
 export class ReviewModule {}

apps/api/src/app/review/usecases/start-process/start-process.usecase.ts

@@ -10,6 +10,7 @@ import {
 } from '@impler/shared';
 import { PaymentAPIService } from '@impler/services';
 import { QueueService } from '@shared/services/queue.service';
+import { AmplitudeService } from '@shared/services/amplitude.service';
 import { DalService, TemplateEntity, UploadRepository } from '@impler/dal';
 
 @Injectable()
@@ -18,6 +19,7 @@ export class StartProcess {
     private dalService: DalService,
     private queueService: QueueService,
     private uploadRepository: UploadRepository,
+    private amplitudeService: AmplitudeService,
     private paymentAPIService: PaymentAPIService
   ) {}
 
@@ -58,6 +60,12 @@ export class StartProcess {
       );
     }
 
+    this.amplitudeService.recordsImported(userEmail, {
+      records: uploadInfo.totalRecords,
+      valid: uploadInfo.validRecords,
+      invalid: uploadInfo.invalidRecords,
+    });
+
     this.queueService.publishToQueue(QueuesEnum.END_IMPORT, {
       uploadId: _uploadId,
       destination: destination,

apps/api/src/app/shared/services/amplitude.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@nestjs/common';
+import { init, track } from '@amplitude/analytics-node';
+
+@Injectable()
+export class AmplitudeService {
+  constructor() {
+    if (process.env.AMPLITUDE_ID) {
+      init(process.env.AMPLITUDE_ID);
+    }
+  }
+  recordsImported(email: string, data: { records: number; valid: number; invalid: number }) {
+    if (process.env.AMPLITUDE_ID) {
+      track('RECORDS IMPORTED', data, {
+        user_id: email,
+      });
+    }
+  }
+}

apps/api/src/types/env.d.ts

@@ -42,5 +42,7 @@ declare namespace NodeJS {
     PAYMENT_API_BASE_URL: string;
     PAYMENT_AUTH_KEY: string;
     PAYMENT_AUTH_VALUE: string;
+
+    AMPLITUDE_ID: string;
   }
 }

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

@@ -1,46 +1,16 @@
 import { IconType } from '@types';
 import { IconSizes } from 'config';
 
-export const IntegrationIcon = ({ size = 'lg' }: IconType) => {
+export const IntegrationIcon = ({ size = 'md' }: IconType) => {
   return (
     <svg
-      fill="none"
-      strokeWidth="2"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-2 -4 24 24"
+      fill="currentColor"
       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>
+      <path d="M12.7361611,0.063952038 C13.2551391,0.263360331 13.5227261,0.869148905 13.3338336,1.41701869 L8.54555162,15.3051026 C8.35665911,15.8529724 7.78281676,16.1354563 7.26383885,15.936048 C6.74486095,15.7366397 6.47727387,15.1308511 6.66616638,14.5829813 L11.4544484,0.694897379 C11.6433409,0.147027596 12.2171832,-0.135456255 12.7361611,0.063952038 Z M2.41421356,8.25614867 L5.94974747,11.9885083 C6.34027176,12.4007734 6.34027176,13.0691871 5.94974747,13.4814522 C5.55922318,13.8937173 4.9260582,13.8937173 4.53553391,13.4814522 L0.292893219,9.0026206 C-0.0976310729,8.59035554 -0.0976310729,7.9219418 0.292893219,7.50967674 L4.53553391,3.03084515 C4.9260582,2.61858008 5.55922318,2.61858008 5.94974747,3.03084515 C6.34027176,3.44311021 6.34027176,4.11152395 5.94974747,4.52378901 L2.41421356,8.25614867 Z M17.5857864,8.25614867 L14.0502525,4.52378901 C13.6597282,4.11152395 13.6597282,3.44311021 14.0502525,3.03084515 C14.4407768,2.61858008 15.0739418,2.61858008 15.4644661,3.03084515 L19.7071068,7.50967674 C20.0976311,7.9219418 20.0976311,8.59035554 19.7071068,9.0026206 L15.4644661,13.4814522 C15.0739418,13.8937173 14.4407768,13.8937173 14.0502525,13.4814522 C13.6597282,13.0691871 13.6597282,12.4007734 14.0502525,11.9885083 L17.5857864,8.25614867 Z" />
     </svg>
   );
 };

apps/web/components/Integration/IntegrationData.tsx

@@ -18,7 +18,7 @@ export const integrationData: Record<IntegrationEnum, Record<string, (data: ICon
   [IntegrationEnum.JAVASCRIPT]: {
     '1) Add Script': ({ embedScriptUrl }) => (
       <>
-        <ModifiedText>Add embed script before closing body tag.</ModifiedText>
+        <ModifiedText>Add embed script before closing body tag</ModifiedText>
         <CodeBlock
           code={`<script type='text/javascript' src='${embedScriptUrl}' async></script>`}
           language="javascript"
@@ -601,6 +601,7 @@ const { showWidget, isImplerInitiated } = useImpler({
   [IntegrationEnum.ANGULAR]: {
     '1) Add Script': ({ embedScriptUrl }) => (
       <>
+        <ModifiedText>Add embed script before closing body tag</ModifiedText>
         <CodeBlock
           code={`<script type="text/javascript" src="${embedScriptUrl}" async></script>`}
           language="javascript"
@@ -899,11 +900,6 @@ export class AppComponent {
         <List type="ordered" styles={{ item: { margin: '10px 0', paddingLeft: '20px' } }}>
           <List.Item>
             <strong>Setting Up Bubble App</strong>
-            <List type="unordered">
-              <List.Item>
-                <strong>You must have a paid Bubble application plan to use the Bubble Data API.</strong>
-              </List.Item>
-            </List>
             <List type="ordered">
               <List.Item>Set up the data type.</List.Item>
               <List.Item>Configure API settings.</List.Item>
@@ -921,23 +917,27 @@ export class AppComponent {
           </List.Item>
 
           <List.Item>
-            <strong>Using the Plugin</strong>
+            <strong>Use the Plugin</strong>
             <List type="ordered">
               <List.Item>Install the plugin.</List.Item>
-              <List.Item>Utilize the plugin features.</List.Item>
+              <List.Item>
+                Use the Plugin
+                <List type="ordered">
+                  <List.Item>Initialize Importer on Page Load</List.Item>
+                  <List.Item>Add a Button on the Page and Add Workflow</List.Item>
+                  <List.Item>Add Workflow to Open Importer on Button Click</List.Item>
+                  <List.Item>Configure Importer</List.Item>
+                </List>
+              </List.Item>
             </List>
           </List.Item>
 
           <List.Item>
-            <strong>Considering UserId while Importing Data</strong>
-          </List.Item>
-
-          <List.Item>
-            <strong>Theming the Importer</strong>
+            <strong>Provide consideration for UserId if neede</strong>
           </List.Item>
 
           <List.Item>
-            <strong>Configuring Multiple Importers on Page (In Progress)</strong>
+            <strong>Theme the Importer by providing theme color</strong>
           </List.Item>
         </List>
 

apps/web/components/Integration/IntegrationModal.tsx

@@ -1,10 +1,9 @@
 import getConfig from 'next/config';
 import { useEffect, useState } from 'react';
 
-import { Flex, Title, useMantineColorScheme } from '@mantine/core';
+import { Flex, NativeSelect, Title, useMantineColorScheme } from '@mantine/core';
 import { track } from '@libs/amplitude';
 import { colors } from '@config';
-import { NativeSelect } from '@ui/native-select';
 import { IntegrationEnum } from '@impler/shared';
 import { IntegrationTabs } from './IntegrationTabs';
 import { integrationData } from './IntegrationData';
@@ -29,7 +28,8 @@ export function IntegrationModal({ accessToken, projectId, templateId, integrati
     setSelectedTab(Object.keys(integrationData[integration])[0]);
   }, [integration]);
 
-  const onIntegrationFrameworkChange = (value: string) => {
+  const onIntegrationFrameworkChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value;
     track({
       name: 'CHANGE INTEGRATION FRAMEWORK',
       properties: {
@@ -57,11 +57,7 @@ export function IntegrationModal({ accessToken, projectId, templateId, integrati
         <Title order={3} color={colorScheme === 'dark' ? colors.StrokeLight : colors.StrokeDark}>
           Integrate
         </Title>
-        <NativeSelect
-          data={[IntegrationEnum.JAVASCRIPT, IntegrationEnum.REACT, IntegrationEnum.ANGULAR, IntegrationEnum.BUBBLE]}
-          onChange={onIntegrationFrameworkChange}
-          variant="default"
-        />
+        <NativeSelect data={Object.values(IntegrationEnum)} onChange={onIntegrationFrameworkChange} variant="default" />
       </Flex>
 
       <IntegrationTabs

apps/web/config/constants.config.ts

@@ -277,7 +277,7 @@ export const DOCUMENTATION_REFERENCE_LINKS = {
   freezeColumns: 'https://docs.impler.io/features/freeze-columns',
   frontendEndCallback: 'https://docs.impler.io/data-retrieval/using-frontend-callback',
   webhook: 'https://docs.impler.io/data-retrieval/using-webhook',
-  bubbleIo: 'https://docs.impler.io/importer/bubble.io-embed.md',
+  bubbleIo: 'https://docs.impler.io/importer/bubble.io-embed',
   subscriptionInformation: 'https://docs.impler.io/platform/how-subscription-works',
   customValidation: 'https://docs.impler.io/features/custom-validation',
   rangeValidator: 'https://docs.impler.io/validations/advanced#range',

apps/web/hooks/useImportDetails.tsx

@@ -83,6 +83,10 @@ export function useImportDetails({ templateId }: useImportDetailProps) {
   };
 
   const onIntegrationClick = () => {
+    track({
+      name: 'INTEGRATE',
+      properties: {},
+    });
     if (templateData && profileInfo) {
       modals.open({
         modalId: MODAL_KEYS.INTEGRATION_DETAILS,