feat: Removed snippet section and number icons

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/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/pages/imports/[id].tsx

@@ -13,16 +13,10 @@ import { useImportDetails } from '@hooks/useImportDetails';
 import { Tabs } from '@ui/Tabs';
 import { Button } from '@ui/button';
 import { Schema } from '@components/imports/schema';
-import { Snippet } from '@components/imports/Snippet';
 import { Destination } from '@components/imports/destination';
 
 import { AppLayout } from '@layouts/AppLayout';
-import { OneIcon } from '@assets/icons/One.icon';
-import { TwoIcon } from '@assets/icons/Two.icon';
 import { EditIcon } from '@assets/icons/Edit.icon';
-import { FiveIcon } from '@assets/icons/Five.icon';
-import { FourIcon } from '@assets/icons/Four.icon';
-import { ThreeIcon } from '@assets/icons/Three.icon';
 import { DeleteIcon } from '@assets/icons/Delete.icon';
 import { LeftArrowIcon } from '@assets/icons/LeftArrow.icon';
 import { IntegrationIcon } from '@assets/icons/Integration.icon';
@@ -123,41 +117,24 @@ export default function ImportDetails({}) {
               id: 'schema',
               value: 'schema',
               title: 'Schema',
-              icon: <OneIcon size="xs" />,
               content: <Schema templateId={templateData._id} />,
             },
             {
               id: 'destination',
               value: 'destination',
               title: 'Destination',
-              icon: <TwoIcon size="xs" />,
               content: <Destination template={templateData} />,
             },
-            {
-              id: 'snippet',
-              value: 'snippet',
-              title: 'Snippet',
-              icon: <ThreeIcon size="xs" />,
-              content: (
-                <Snippet
-                  templateId={templateData._id}
-                  projectId={templateData._projectId}
-                  accessToken={profileInfo?.accessToken}
-                />
-              ),
-            },
             {
               id: 'validator',
               value: 'validator',
               title: 'Validator',
-              icon: <FourIcon size="xs" />,
               content: <Validator templateId={templateData._id} />,
             },
             {
               id: 'output',
               value: 'output',
               title: 'Output',
-              icon: <FiveIcon size="xs" />,
               content: <Editor templateId={templateData._id} switchToDestination={() => setActiveTab('destination')} />,
             },
           ]}