Changes

apps/license-modal/components/license-table-modal.jsx

@@ -1,23 +1,23 @@
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useModulaState } from '../state/use-modula-state';
+import { useKnowledgeBaseState } from '../state/use-knowledge-base-state';
 import { toggleModal } from '../state/actions';
 import LicenseTable from './license-table';
 
 export default function LicenseTableModal() {
-	const { dispatch } = useModulaState();
+	const { dispatch } = useKnowledgeBaseState();
 
 	const closeModal = () => {
 		dispatch( toggleModal( false ) );
 	};
 
 	return <Modal
-		title={ __( 'Select license action', 'modula-instagram' ) }
+		title={ __( 'Select license action', 'wpchill-kb' ) }
 		onRequestClose={ closeModal }
 		isFullScreen={ true }
 		isBusy={ true }
 		className="licenseTableModal"
-		closeButtonLabel={ __( 'Close', 'modula-instagram' ) }>
+		closeButtonLabel={ __( 'Close', 'wpchill-kb' ) }>
 		<LicenseTable />
 	</Modal>;
 }

apps/license-modal/components/license-table.jsx

@@ -1,13 +1,34 @@
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import { useModulaState } from '../state/use-modula-state';
+import { Button, Spinner } from '@wordpress/components';
+import { useKnowledgeBaseState } from '../state/use-knowledge-base-state';
+import { useModalLicenses } from '../query/useModalLicenses';
 import styles from './licenses-modal.module.scss';
 
 export default function LicenseTableModal() {
-	const { state } = useModulaState();
-	const { licensesData } = state;
+	const { state } = useKnowledgeBaseState();
+	const { postId } = state;
 
-	const hasLicenseKeys = licensesData.some( ( license ) => license.key );
+	const { data, isLoading, error } = useModalLicenses( postId );
+
+	if ( isLoading ) {
+		return (
+			<div className={ styles.spinnerWrapper }>
+				<Spinner className={ styles.spinner } />
+			</div>
+		);
+	}
+
+	if ( error || ! data || data.length === 0 ) {
+		return (
+			<div className={ styles.errorWrapper }>
+				<p className={ styles.errorMessage }>
+					{ __( 'Could not find any upgrade options.', 'wpchill-kb' ) }
+				</p>
+			</div>
+		);
+	}
+
+	const hasLicenseKeys = data.some( ( license ) => license.key );
 
 	return (
 		<div>
@@ -20,7 +41,7 @@ export default function LicenseTableModal() {
 					</tr>
 				</thead>
 				<tbody>
-					{ licensesData.map( ( license, index ) => (
+					{ data.map( ( license, index ) => (
 						<tr key={ index }>
 							<td>{ license.title }</td>
 							{ hasLicenseKeys && <td className={ styles.key }>{ license.key }</td> }

apps/license-modal/components/licenses-modal.module.scss

@@ -1,50 +1,72 @@
 .tableModern {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1rem 0;
-    font-size: 0.9rem;
-    font-family: Arial, sans-serif;
-
-    thead {
-      background-color: #f3f4f6;
-      text-align: left;
-
-      th {
-        padding: 0.75rem;
-        border-bottom: 2px solid #e5e7eb;
-        color: #111827;
-        font-weight: 600;
-        text-transform: uppercase;
-        font-size: 0.85rem;
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  font-size: 0.9rem;
+  font-family: Arial, sans-serif;
+
+  thead {
+    background-color: #f3f4f6;
+    text-align: left;
+
+    th {
+      padding: 0.75rem;
+      border-bottom: 2px solid #e5e7eb;
+      color: #111827;
+      font-weight: 600;
+      text-transform: uppercase;
+      font-size: 0.85rem;
+    }
+  }
+
+  tbody {
+    tr {
+      &:nth-child(odd) {
+        background-color: #f9fafb;
+      }
+
+      &:hover {
+        background-color: #eef2f7;
       }
     }
-  
-    tbody {
-      tr {
-        &:nth-child(odd) {
-          background-color: #f9fafb;
-        }
-
-        &:hover {
-          background-color: #eef2f7;
-        }
+
+    td {
+      padding: 0.75rem;
+      border-bottom: 1px solid #e5e7eb;
+      color: #374151;
+
+      &.key {
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 0.85rem;
+        color: #1f2937;
       }
-
-      td {
-        padding: 0.75rem;
-        border-bottom: 1px solid #e5e7eb;
-        color: #374151;
-
-        &.key {
-          font-family: 'Courier New', Courier, monospace;
-          font-size: 0.85rem;
-          color: #1f2937;
-        }
-
-        &.action {
-          text-align: center;
-        }
+
+      &.action {
+        text-align: center;
       }
     }
   }
-
+}
+
+.spinnerWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100px;
+
+  .spinner {
+    width: 30px;
+    height: 30px;
+    color: #fff;
+    position: static;
+  }
+}
+
+.errorWrapper {
+  text-align: center;
+  margin: 20px 0;
+
+  .errorMessage {
+    font-size: 16px;
+  }
+}

apps/license-modal/index.js

@@ -1,19 +1,23 @@
 import { createRoot } from '@wordpress/element';
 import { StateProvider } from './state/state';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from './query/client';
 import OpenModalButton from './open-modal-button';
 import './index.scss';
 
 document.addEventListener( 'DOMContentLoaded', async () => {
 	const wrapp = document.getElementById( 'wpchill-kb-license-actions' );
-	const licenses = wrapp?.dataset?.licenses || false;
+	const postId = wrapp?.dataset?.postid || 0;
 
-	if ( ! licenses ) {
+	if ( 0 === postId ) {
 		return;
 	}
 	const rootEl = createRoot( wrapp );
 
 	rootEl.render(
-		<StateProvider licenses={ licenses }>
-			<OpenModalButton />
-		</StateProvider> );
+		<QueryClientProvider client={ queryClient }>
+			<StateProvider postId={ postId }>
+				<OpenModalButton />
+			</StateProvider>
+		</QueryClientProvider> );
 } );

apps/license-modal/index.scss

@@ -3,4 +3,21 @@ body.single-kb{
         max-width: 800px;
         height: auto;
     }
+    .kbLicensesOptionsButton {
+        display: inline-block;
+        background-color: #007bff;
+        color: #fff;
+        padding: 10px 20px;
+        text-decoration: none;
+        border-radius: 4px;
+        font-weight: bold;
+        transition: background-color .3s ease;
+        height: auto;
+
+        &:hover{
+            background-color: #0056b3;
+            text-decoration: none;
+            color: #fff;
+        }
+    }
 }

apps/license-modal/open-modal-button.jsx

@@ -2,11 +2,11 @@ import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import LicenseTableModal from './components/license-table-modal';
 import { toggleModal } from './state/actions';
-import { useModulaState } from './state/use-modula-state';
+import { useKnowledgeBaseState } from './state/use-knowledge-base-state';
 import { useCallback } from '@wordpress/element';
 
-export default function InstagramConnector() {
-	const { state, dispatch } = useModulaState();
+export default function OpenModalButton() {
+	const { state, dispatch } = useKnowledgeBaseState();
 
 	const handleClick = useCallback( ( evt ) => {
 		evt.preventDefault();
@@ -16,7 +16,7 @@ export default function InstagramConnector() {
 	return (
 		<>
 			<Button
-				variant={ 'primary' }
+				className="kbLicensesOptionsButton"
 				onClick={ handleClick }
 			>
 				{ __( 'See Options', 'wpchill-kb' ) }

apps/license-modal/query/client.js

@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient();

apps/license-modal/query/useModalLicenses.js

@@ -0,0 +1,23 @@
+import { useKnowledgeBaseState } from '../state/use-knowledge-base-state';
+import { useQuery } from '@tanstack/react-query';
+import apiFetch from '@wordpress/api-fetch';
+
+const fetchModalLicenses = async ( postId ) => {
+	const products = await apiFetch( {
+		path: `/wpchill-kb/v1/modal-licenses/${ postId }`,
+		method: 'GET',
+	} );
+
+	return products;
+};
+
+export const useModalLicenses = () => {
+	const { state } = useKnowledgeBaseState();
+
+	const data = useQuery( {
+		queryKey: [ 'modalLicenses', state.postId ],
+		queryFn: async () => fetchModalLicenses( state.postId ),
+	} );
+
+	return data;
+};

apps/license-modal/state/default-state.js

@@ -1,4 +1,4 @@
-export const initialState = ( licenses ) => ( {
+export const initialState = ( postId ) => ( {
 	isModalOpen: false,
-	licensesData: JSON.parse( licenses ),
+	postId,
 } );

apps/license-modal/state/state.js

@@ -1,12 +1,12 @@
 import { useReducer } from '@wordpress/element';
 import reducer from './reducer';
 import { initialState } from './default-state';
-import { StateContext } from './use-modula-state';
+import { StateContext } from './use-knowledge-base-state';
 
-export function StateProvider( { children, licenses } ) {
+export function StateProvider( { children, postId } ) {
 	const [ state, dispatch ] = useReducer(
 		reducer,
-		initialState( licenses ),
+		initialState( postId ),
 	);
 	return (
 		<StateContext.Provider value={ { state, dispatch } }>

apps/license-modal/state/use-modula-state.js → apps/license-modal/state/use-knowledge-base-state.js

@@ -1,10 +1,10 @@
 import { createContext, useContext } from '@wordpress/element';
 export const StateContext = createContext();
 
-export function useModulaState() {
+export function useKnowledgeBaseState() {
 	const context = useContext( StateContext );
 	if ( ! context ) {
-		throw new Error( 'useModulaState must be used within a StateProvider' );
+		throw new Error( 'useKnowledgeBaseState must be used within a StateProvider' );
 	}
 	return context;
 }

apps/lock-select/components/access-selector.jsx

@@ -1,12 +1,12 @@
 import { SelectControl, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useModulaState } from '../state/use-modula-state';
+import { useKnowledgeBaseState } from '../state/use-knowledge-base-state';
 import { setSelectedType } from '../state/actions';
 import { useAccessProducts } from '../query/useAccessProducts';
 import styles from './lock-select.module.scss';
 
 export default function AccessSelector() {
-	const { state, dispatch } = useModulaState();
+	const { state, dispatch } = useKnowledgeBaseState();
 	const { selectedType, postId } = state;
 
 	const options = [

apps/lock-select/components/metabox-content.jsx

@@ -1,9 +1,9 @@
-import { useModulaState } from '../state/use-modula-state';
+import { useKnowledgeBaseState } from '../state/use-knowledge-base-state';
 import AccessSelector from './access-selector';
 import ProductSelector from './product-selector';
 
 export default function MetaboxContent() {
-	const { state } = useModulaState();
+	const { state } = useKnowledgeBaseState();
 	const { selectedType } = state;
 
 	return (

apps/lock-select/components/product-selector.jsx

@@ -1,9 +1,9 @@
-import { useModulaState } from '../state/use-modula-state';
+import { useKnowledgeBaseState } from '../state/use-knowledge-base-state';
 import { useAccessProducts } from '../query/useAccessProducts';
 import ProductTypeSelector from './product-type-selector';
 
 export default function ProductSelector() {
-	const { state } = useModulaState();
+	const { state } = useKnowledgeBaseState();
 	const { postId, selectedProducts } = state;
 	const { data, error } = useAccessProducts( postId );