feat remove snippet

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/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')} />,
             },
           ]}