Version 2.0.2

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-components', 'wp-element'), 'version' => '34829a68d99b83395c79');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-components', 'wp-element'), 'version' => '25796d01c3d2c0608321');

integration-toolkit-for-beehiiv.php

@@ -10,7 +10,7 @@
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
  * Text Domain:       integration-toolkit-for-beehiiv
  * Domain Path:       /languages
- * Requires at least: 5.5.0
+ * Requires at least: 6.5.3
  * Tested up to:      6.6.1
  * Requires PHP:      7.4
  *

lib/assets/css/reactToastify.css

@@ -21,7 +21,7 @@
 	--toastify-toast-max-height: 800px;
 	--toastify-toast-bd-radius: 6px;
 	--toastify-font-family: sans-serif;
-	--toastify-z-index: 9999;
+	--toastify-z-index: 100001;
 	--toastify-text-color-light: #757575;
 	--toastify-text-color-dark: #fff;
 	--toastify-text-color-info: #fff;
@@ -901,3 +901,17 @@
 	text-decoration: underline;
 	cursor: pointer;
 }
+
+.include-as-connection-container{
+	margin-top: 40px;
+}
+.components-modal__content {
+	margin-top: 0 !important;
+}
+.components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
+ border-width: 0 !important;
+}
+.szh-accordion__item {
+	margin-bottom: 40px;
+	border-bottom: 1px solid #d7dbdb !important;
+}

lib/components/about-plugin.js

@@ -0,0 +1,30 @@
+import { styled } from 'styled-components';
+export function AboutPlugin() {
+    return (
+    <AboutPluginWrapper>
+        <h2>About RE/beehiiv</h2>
+        <p>Boost your productivity with our streamlined plugin, designed to simplify your workflow and integrate seamlessly with your favorite tools. Whether you're automating tasks, tracking key metrics, or improving efficiency, this plugin delivers the flexibility and ease you need to stay focused on what matters most. Get started today and experience a smarter, more effective way to work.</p>
+    </AboutPluginWrapper>
+    );
+};
+
+const AboutPluginWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    & > * {
+        flex: 1;
+        margin:0;
+    }
+`;
+
+const PluginInfo = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 18px;
+    align-items: center;
+    & > * {
+        margin: 0;
+    }
+`;

lib/components/add-button.js

@@ -0,0 +1,23 @@
+import { Button, ButtonColor } from '@refactco/ui-kit';
+const AddButton = ({ 
+    children,
+	icon,
+	iconPosition = 'left',
+	buttonColor = ButtonColor.GREEN,
+	onClick,
+ }) => { 
+
+    return(
+        <Button
+            color={ buttonColor }
+            icon={ icon ??  null }
+            iconPosition={ iconPosition }
+            style={ { display: 'flex', alignItems: 'center' } }
+            onClick={ onClick }
+        >
+            { children }
+        </Button>
+        )
+};
+
+export default AddButton;

lib/components/add-new-connection-modal/add-new-connection-modal-helper.js

@@ -0,0 +1,105 @@
+const apiFetch = wp.apiFetch;
+import { toast } from 'react-toastify';
+export function addNewConnectionModalHelper( 
+	state,
+	setState,
+	handleRefreshConnectionsData,
+	onClose 
+) {
+
+    function handleInputChange( value, name ) {
+		setState( ( prevState ) => {
+			const newState = { ...prevState, [ name ]: value };
+			return newState;
+		} );
+	}
+    function validateInput( name, value ) {
+		switch ( name ) {
+			case 'apiKey':
+				if ( ! value ) return 'API Key is required.';
+				if ( value.length !== 64   )
+					return 'API Key must be 64 characters.';
+				break;
+			case 'publicationId':
+				if ( ! value  ) return 'Publication ID is required.';
+				if ( value.length !== 40  )
+					return 'Publication ID must be 40 characters.';
+				break;
+			case 'connectionName':
+				if ( ! value ) return 'Connection Name is required.';
+				break;
+
+			default:
+				return '';
+		}
+	}
+
+	function handleBlur(name, value) {
+		const error = validateInput(name, value);
+		setState((prevState) => {
+			const newErrors = { ...prevState.errors, [name]: error };
+			const isFormDisabled = Object.values(newErrors).some((err) => err);
+
+			return {
+				...prevState,
+				errors: newErrors,
+				isFormDisabled,
+			};
+		});
+	}
+
+	const createNewConnectionHandler = async (event) => {
+		event.preventDefault();
+		const { apiKey, publicationId, connectionName } = state;
+		const data = {
+			api_key: apiKey,
+			publication_id: publicationId,
+			connection_name: connectionName,
+		};
+		try {
+			setState( ( prevState ) => ( {
+				...prevState,
+				isFormDisabled: true,
+				disableInput: true,
+			} ) );
+
+			let path = 'itfb/v1/add-connection';
+			const response = await apiFetch( {
+				path,
+				method: 'POST',
+				data,
+			} );
+			const {  message } = response;
+
+
+			if(response.data){
+				toast.error(message);
+
+			} else {
+				onClose();
+				handleRefreshConnectionsData();
+				toast.success( message );
+
+			}
+
+
+		} catch ( error ) {
+			console.log(error)
+			const { message } = error;
+
+			setState( ( prevState ) => ( {
+				...prevState,
+				errors: {  },
+				isFormDisabled: false,
+				disableInput: false,
+			} ) );
+
+			toast.error( message );
+		}
+    }
+    return {
+        handleInputChange,
+        handleBlur,
+        createNewConnectionHandler,
+    };
+}

lib/components/add-new-connection-modal/add-new-connection-modal.js

@@ -0,0 +1,153 @@
+import { Modal } from '@wordpress/components';
+import { Section } from '@refactco/ui-kit';
+const { useState } = wp.element;
+import { addNewConnectionModalHelper } from './add-new-connection-modal-helper';
+import {
+    Button,
+    Input,
+    InputType,
+    Tooltip,
+    TooltipMode,
+    TooltipPlace,
+} from '@refactco/ui-kit';
+import { ErrorContainer } from '../add-new-schedule-form/add-new-schedule-form';
+import styled from 'styled-components';
+
+const FormContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    @media (min-width: 768px) {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+`;
+
+const InputWrapper = styled.div`
+    width: 100%;
+    &:nth-child(3) {
+        margin-bottom: 16px;
+    }
+`;
+
+const AddNewConnectionModal = ({
+    onClose,
+    handleRefreshConnectionsData,
+}) => {
+    const [state, setState] = useState({
+        apiKey: '',
+        publicationId: '',
+        connectionName: '',
+        isFormDisabled: true,
+        errors: {},
+        disableInput: false,
+    });
+
+    const {
+        apiKey,
+        publicationId,
+        connectionName,
+        isFormDisabled,
+        errors,
+        disableInput,
+    } = state;
+
+    const helper = addNewConnectionModalHelper(
+        state,
+        setState,
+        handleRefreshConnectionsData,
+        onClose
+    );
+    const {
+        handleInputChange,
+        handleBlur,
+        createNewConnectionHandler,
+    } = helper;
+
+    return (
+        <Modal onRequestClose={onClose} size="large">
+            <Section
+                headerProps={{
+                    title: 'Create a New Connection',
+                    description: 'Create a new connection to use in manual/scheduled imports.',
+                }}
+            >
+                <form onSubmit={createNewConnectionHandler}>
+                    <FormContainer>
+                        <InputWrapper>
+                            <label className="label" htmlFor="apiKey">
+                                API Key
+                                <Tooltip
+                                    id="apiKey"
+                                    mode={TooltipMode.DARK}
+                                    place={TooltipPlace.TOP}
+                                    content="The API Key is a unique identifier that allows you to access your Beehiiv account data. You can find your API Key by logging into your Beehiiv account and go to Settings > Integrations > which will open up the API tab"
+                                >
+                                    <div className="question-icon">?</div>
+                                </Tooltip>
+                            </label>
+                            <Input
+                                type={InputType.TEXT}
+                                value={apiKey}
+                                onChange={(value) => handleInputChange(value, 'apiKey')}
+                                onBlur={() => handleBlur('apiKey', apiKey)}
+                                required
+                                hasError={errors.apiKey}
+                                disabled={disableInput}
+                                autoFocus
+                            />
+                            {errors.apiKey && <ErrorContainer>{errors.apiKey}</ErrorContainer>}
+                        </InputWrapper>
+                        <InputWrapper>
+                            <label className="label" htmlFor="publicationId">
+                                Publication ID
+                                <Tooltip
+                                    id="publicationId"
+                                    mode={TooltipMode.DARK}
+                                    place={TooltipPlace.TOP}
+                                    content="The Publication ID is a unique identifier that allows you to access your Beehiiv account data. You can find your Publication ID by logging into your Beehiiv account and go to Settings > Integrations > which will open up the API tab"
+                                >
+                                    <div className="question-icon">?</div>
+                                </Tooltip>
+                            </label>
+                            <Input
+                                type={InputType.TEXT}
+                                value={publicationId}
+                                onChange={(value) => handleInputChange(value, 'publicationId')}
+                                onBlur={() => handleBlur('publicationId', publicationId)}
+                                required
+                                hasError={errors.publicationId}
+                                disabled={disableInput}
+                            />
+                            {errors.publicationId && <ErrorContainer>{errors.publicationId}</ErrorContainer>}
+                        </InputWrapper>
+                        <InputWrapper>
+                            <label className="label" htmlFor="connectionName">
+                                Name of Connection
+                            </label>
+                            <Input
+                                type={InputType.TEXT}
+                                value={connectionName}
+                                onChange={(value) => handleInputChange(value, 'connectionName')}
+                                onBlur={() => handleBlur('connectionName', connectionName)}
+                                hasError={errors.connectionName}
+                                required
+                                disabled={disableInput}
+                            />
+                            {errors.connectionName && <ErrorContainer>{errors.connectionName}</ErrorContainer>}
+                        </InputWrapper>
+                    </FormContainer>
+                    <Button
+                        type="submit"
+                        onClick={createNewConnectionHandler}
+                        disabled={isFormDisabled }
+                    >
+                        Create Connection
+                    </Button>
+                </form>
+            </Section>
+        </Modal>
+    );
+};
+
+export default AddNewConnectionModal;