diff --git a/apps/license-modal/components/license-table-modal.jsx b/apps/license-modal/components/license-table-modal.jsx
index 80c363f..49e4b69 100644
--- a/apps/license-modal/components/license-table-modal.jsx
+++ b/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
+ closeButtonLabel={ __( 'Close', 'wpchill-kb' ) }>
;
}
diff --git a/apps/license-modal/components/license-table.jsx b/apps/license-modal/components/license-table.jsx
index a04c0b4..86407b8 100644
--- a/apps/license-modal/components/license-table.jsx
+++ b/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 (
+
+
+
+ );
+ }
+
+ if ( error || ! data || data.length === 0 ) {
+ return (
+
+
+ { __( 'Could not find any upgrade options.', 'wpchill-kb' ) }
+
+
+ );
+ }
+
+ const hasLicenseKeys = data.some( ( license ) => license.key );
return (
@@ -20,7 +41,7 @@ export default function LicenseTableModal() {
- { licensesData.map( ( license, index ) => (
+ { data.map( ( license, index ) => (
{ license.title } |
{ hasLicenseKeys && { license.key } | }
diff --git a/apps/license-modal/components/licenses-modal.module.scss b/apps/license-modal/components/licenses-modal.module.scss
index 2c76998..86239d7 100644
--- a/apps/license-modal/components/licenses-modal.module.scss
+++ b/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;
}
}
}
-
\ No newline at end of file
+}
+
+.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;
+ }
+}
diff --git a/apps/license-modal/index.js b/apps/license-modal/index.js
index f56481e..96c379a 100644
--- a/apps/license-modal/index.js
+++ b/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(
-
-
- );
+
+
+
+
+ );
} );
diff --git a/apps/license-modal/index.scss b/apps/license-modal/index.scss
index 662e84e..9be60fc 100644
--- a/apps/license-modal/index.scss
+++ b/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;
+ }
+ }
}
diff --git a/apps/license-modal/open-modal-button.jsx b/apps/license-modal/open-modal-button.jsx
index 2fb9542..cb84ad8 100644
--- a/apps/license-modal/open-modal-button.jsx
+++ b/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 (
<>