diff --git a/apps/web/assets/icons/Five.icon.tsx b/apps/web/assets/icons/Five.icon.tsx deleted file mode 100644 index 4ad03e4d..00000000 --- a/apps/web/assets/icons/Five.icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { IconType } from '@types'; -import { IconSizes } from 'config'; - -export const FiveIcon = ({ size = 'sm' }: IconType) => { - return ( - - - - ); -}; diff --git a/apps/web/assets/icons/Four.icon.tsx b/apps/web/assets/icons/Four.icon.tsx deleted file mode 100644 index 5f1cc541..00000000 --- a/apps/web/assets/icons/Four.icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { IconType } from '@types'; -import { IconSizes } from 'config'; - -export const FourIcon = ({ size = 'sm' }: IconType) => { - return ( - - - - ); -}; diff --git a/apps/web/assets/icons/One.icon.tsx b/apps/web/assets/icons/One.icon.tsx deleted file mode 100644 index 26ad6951..00000000 --- a/apps/web/assets/icons/One.icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { IconType } from '@types'; -import { IconSizes } from 'config'; - -export const OneIcon = ({ size = 'sm' }: IconType) => { - return ( - - - - ); -}; diff --git a/apps/web/assets/icons/Three.icon.tsx b/apps/web/assets/icons/Three.icon.tsx deleted file mode 100644 index 726a9c5d..00000000 --- a/apps/web/assets/icons/Three.icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { IconType } from '@types'; -import { IconSizes } from 'config'; - -export const ThreeIcon = ({ size = 'sm' }: IconType) => { - return ( - - - - ); -}; diff --git a/apps/web/assets/icons/Two.icon.tsx b/apps/web/assets/icons/Two.icon.tsx deleted file mode 100644 index 67d33b69..00000000 --- a/apps/web/assets/icons/Two.icon.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { IconType } from '@types'; -import { IconSizes } from 'config'; - -export const TwoIcon = ({ size = 'sm' }: IconType) => { - return ( - - - - ); -}; diff --git a/apps/web/components/Integration/IntegrationData.tsx b/apps/web/components/Integration/IntegrationData.tsx index ae92e782..de7fa089 100644 --- a/apps/web/components/Integration/IntegrationData.tsx +++ b/apps/web/components/Integration/IntegrationData.tsx @@ -18,7 +18,7 @@ export const integrationData: Record ( <> - Add embed script before closing body tag. + Add embed script before closing body tag `} language="javascript" @@ -601,6 +601,7 @@ const { showWidget, isImplerInitiated } = useImpler({ [IntegrationEnum.ANGULAR]: { '1) Add Script': ({ embedScriptUrl }) => ( <> + Add embed script before closing body tag `} language="javascript" @@ -899,11 +900,6 @@ export class AppComponent { Setting Up Bubble App - - - You must have a paid Bubble application plan to use the Bubble Data API. - - Set up the data type. Configure API settings. @@ -921,23 +917,27 @@ export class AppComponent { - Using the Plugin + Use the Plugin Install the plugin. - Utilize the plugin features. + + Use the Plugin + + Initialize Importer on Page Load + Add a Button on the Page and Add Workflow + Add Workflow to Open Importer on Button Click + Configure Importer + + - Considering UserId while Importing Data - - - - Theming the Importer + Provide consideration for UserId if neede - Configuring Multiple Importers on Page (In Progress) + Theme the Importer by providing theme color diff --git a/apps/web/components/imports/Snippet.tsx b/apps/web/components/imports/Snippet.tsx deleted file mode 100644 index 1086ef68..00000000 --- a/apps/web/components/imports/Snippet.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import getConfig from 'next/config'; -import { Prism } from '@mantine/prism'; -import { Accordion, Code, Text, Title, useMantineColorScheme } from '@mantine/core'; - -import { CONSTANTS, colors } from '@config'; - -interface SnippetProps { - projectId: string; - templateId: string; - accessToken?: string; -} - -const { publicRuntimeConfig } = getConfig(); - -export function Snippet({ projectId, templateId, accessToken }: SnippetProps) { - const { colorScheme } = useMantineColorScheme(); - - return ( - <> - - - - - 1. Add Script - - - Copy & Paste this snippet to your code before the closing body tag. It will add impler variable in window. - - - - {/* eslint-disable-next-line max-len */} - {``} - - - - - - - 2. Install the package - - - Add <Code>@impler/react</Code> in your application by running the following command. - - - - {`npm i @impler/react\n# or\nyarn add @impler/react`} - - - - - - - 3. Add Import Button - - - Now add <Code>Import</Code> Button from <Code>@impler/react</Code> which opens the Widget. - - - - {`import { useImpler } from '@impler/react'; - -const { showWidget, isImplerInitiated } = useImpler({ - projectId: "${projectId}", - templateId: "${templateId}", - accessToken: "${accessToken}", -}); - -`} - - You can get to know about props on{' '} - - documentation - - . - - - - - - ); -} diff --git a/apps/web/config/constants.config.ts b/apps/web/config/constants.config.ts index 0aa6184a..952025ec 100644 --- a/apps/web/config/constants.config.ts +++ b/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', diff --git a/apps/web/pages/imports/[id].tsx b/apps/web/pages/imports/[id].tsx index 1fac0013..97168579 100644 --- a/apps/web/pages/imports/[id].tsx +++ b/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: , content: , }, { id: 'destination', value: 'destination', title: 'Destination', - icon: , content: , }, - { - id: 'snippet', - value: 'snippet', - title: 'Snippet', - icon: , - content: ( - - ), - }, { id: 'validator', value: 'validator', title: 'Validator', - icon: , content: , }, { id: 'output', value: 'output', title: 'Output', - icon: , content: setActiveTab('destination')} />, }, ]}