From 9e0eff7e5a6f3161a825a11e633bbe65e930096c Mon Sep 17 00:00:00 2001
From: Nevo David <me@nevos.io>
Date: Sat, 3 Jan 2026 11:00:06 +0700
Subject: [PATCH] feat: payload wizard

---
 .../src/components/media/media.component.tsx  |  33 +++-
 .../public-api/public.component.tsx           | 176 ++++++++++--------
 2 files changed, 122 insertions(+), 87 deletions(-)

diff --git a/apps/frontend/src/components/media/media.component.tsx b/apps/frontend/src/components/media/media.component.tsx
index 74938f18..7d7605dd 100644
--- a/apps/frontend/src/components/media/media.component.tsx
+++ b/apps/frontend/src/components/media/media.component.tsx
@@ -257,9 +257,8 @@ export const MediaBox: FC<{
 
   const addToUpload = useCallback(async (e: ChangeEvent<HTMLInputElement>) => {
     const files = Array.from(e.target.files).slice(0, 5);
-    for (const file of files) {
-      uppy.addFile(file);
-    }
+    // @ts-ignore
+    uppy.addFiles(files);
   }, []);
 
   const dragAndDrop = useCallback(
@@ -335,8 +334,15 @@ export const MediaBox: FC<{
         >
           {!isLoading && !!data?.results?.length && (
             <div className="flex-1 text-[14px] font-[600] whitespace-pre-line">
-              {t('select_or_upload_pictures_max_5', 'Select or upload pictures (maximum 5 at a time).')}{'\n'}
-              {t('you_can_drag_drop_pictures', 'You can also drag & drop pictures.')}
+              {t(
+                'select_or_upload_pictures_max_5',
+                'Select or upload pictures (maximum 5 at a time).'
+              )}
+              {'\n'}
+              {t(
+                'you_can_drag_drop_pictures',
+                'You can also drag & drop pictures.'
+              )}
             </div>
           )}
           <input
@@ -384,11 +390,21 @@ export const MediaBox: FC<{
               <>
                 <NoMediaIcon />
                 <div className="text-[20px] font-[600]">
-                  {t('you_dont_have_any_media_yet', "You don't have any media yet")}
+                  {t(
+                    'you_dont_have_any_media_yet',
+                    "You don't have any media yet"
+                  )}
                 </div>
                 <div className="whitespace-pre-line text-newTextColor/[0.6] text-center">
-                  {t('select_or_upload_pictures_max_5', 'Select or upload pictures (maximum 5 at a time).')} {'\n'}
-                  {t('you_can_drag_drop_pictures', 'You can also drag & drop pictures.')}
+                  {t(
+                    'select_or_upload_pictures_max_5',
+                    'Select or upload pictures (maximum 5 at a time).'
+                  )}{' '}
+                  {'\n'}
+                  {t(
+                    'you_can_drag_drop_pictures',
+                    'You can also drag & drop pictures.'
+                  )}
                 </div>
                 <div className="forceChange">{btn}</div>
               </>
@@ -616,7 +632,6 @@ export const MultiMediaComponent: FC<{
     }
   }, [changeMedia, t]);
 
-
   return (
     <>
       <div className="b1 flex flex-col gap-[8px] rounded-bl-[8px] select-none w-full">
diff --git a/apps/frontend/src/components/public-api/public.component.tsx b/apps/frontend/src/components/public-api/public.component.tsx
index 99728f96..570342bc 100644
--- a/apps/frontend/src/components/public-api/public.component.tsx
+++ b/apps/frontend/src/components/public-api/public.component.tsx
@@ -9,7 +9,7 @@ import { useVariables } from '@gitroom/react/helpers/variable.context';
 import { useT } from '@gitroom/react/translation/get.transation.service.client';
 export const PublicComponent = () => {
   const user = useUser();
-  const { backendUrl } = useVariables();
+  const { backendUrl, frontEndUrl } = useVariables();
   const toaster = useToaster();
   const [reveal, setReveal] = useState(false);
   const [reveal2, setReveal2] = useState(false);
@@ -28,91 +28,111 @@ export const PublicComponent = () => {
     return null;
   }
   return (
-    <div className="flex flex-col">
-      <h3 className="text-[20px]">{t('public_api', 'Public API')}</h3>
-      <div className="text-customColor18 mt-[4px]">
-        {t(
-          'use_postiz_api_to_integrate_with_your_tools',
-          'Use Postiz API to integrate with your tools.'
-        )}
-        <br />
-        <a
-          className="underline hover:font-bold hover:underline"
-          href="https://docs.postiz.com/public-api"
-          target="_blank"
-        >
+    <div className="flex flex-col gap-[20px]">
+      <div className="flex flex-col">
+        <h3 className="text-[20px]">{t('public_api', 'Public API')}</h3>
+        <div className="text-customColor18 mt-[4px]">
           {t(
-            'read_how_to_use_it_over_the_documentation',
-            'Read how to use it over the documentation.'
-          )}
-        </a>
-        <a
-          className="underline hover:font-bold hover:underline"
-          href="https://www.npmjs.com/package/n8n-nodes-postiz"
-          target="_blank"
-        ><br />
-          {t(
-            'check_n8n',
-            'Check out our N8N custom node for Postiz.'
-          )}
-        </a>
-      </div>
-      <div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
-        <div className="flex items-center">
-          {reveal ? (
-            user.publicApi
-          ) : (
-            <>
-              <div className="blur-sm">{user.publicApi.slice(0, -5)}</div>
-              <div>{user.publicApi.slice(-5)}</div>
-            </>
+            'use_postiz_api_to_integrate_with_your_tools',
+            'Use Postiz API to integrate with your tools.'
           )}
+          <br />
+          <a
+            className="underline hover:font-bold hover:underline"
+            href="https://docs.postiz.com/public-api"
+            target="_blank"
+          >
+            {t(
+              'read_how_to_use_it_over_the_documentation',
+              'Read how to use it over the documentation.'
+            )}
+          </a>
+          <a
+            className="underline hover:font-bold hover:underline"
+            href="https://www.npmjs.com/package/n8n-nodes-postiz"
+            target="_blank"
+          >
+            <br />
+            {t('check_n8n', 'Check out our N8N custom node for Postiz.')}
+          </a>
         </div>
-        <div>
-          {!reveal ? (
-            <Button onClick={() => setReveal(true)}>
-              {t('reveal', 'Reveal')}
-            </Button>
-          ) : (
-            <Button onClick={copyToClipboard}>
-              {t('copy_key', 'Copy Key')}
-            </Button>
-          )}
+        <div className="flex flex-col">
+          <div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
+            <div className="flex items-center">
+              {reveal ? (
+                user.publicApi
+              ) : (
+                <>
+                  <div className="blur-sm">{user.publicApi.slice(0, -5)}</div>
+                  <div>{user.publicApi.slice(-5)}</div>
+                </>
+              )}
+            </div>
+            <div>
+              {!reveal ? (
+                <Button onClick={() => setReveal(true)}>
+                  {t('reveal', 'Reveal')}
+                </Button>
+              ) : (
+                <Button onClick={copyToClipboard}>
+                  {t('copy_key', 'Copy Key')}
+                </Button>
+              )}
+            </div>
+          </div>
         </div>
       </div>
 
-      <h3 className="text-[20px]">{t('mcp', 'MCP')}</h3>
-      <div className="text-customColor18 mt-[4px]">
-        {t(
-          'connect_your_mcp_client_to_postiz_to_schedule_your_posts_faster',
-          'Connect Postiz MCP server to your client (Http streaming) to schedule your posts faster.'
-        )}
-      </div>
-      <div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
-        <div className="flex items-center">
-          {reveal2 ? (
-            `${backendUrl}/mcp/` + user.publicApi
-          ) : (
-            <>
-              <div className="blur-sm">
-                {(`${backendUrl}/mcp/` + user.publicApi).slice(0, -5)}
-              </div>
-              <div>
-                {(`${backendUrl}/mcp/` + user.publicApi).slice(-5)}
-              </div>
-            </>
+      <div className="flex flex-col">
+        <h3 className="text-[20px]">{t('mcp', 'MCP')}</h3>
+        <div className="text-customColor18 mt-[4px]">
+          {t(
+            'connect_your_mcp_client_to_postiz_to_schedule_your_posts_faster',
+            'Connect Postiz MCP server to your client (Http streaming) to schedule your posts faster.'
           )}
         </div>
-        <div>
-          {!reveal2 ? (
-            <Button onClick={() => setReveal2(true)}>
-              {t('reveal', 'Reveal')}
-            </Button>
-          ) : (
-            <Button onClick={copyToClipboard2}>
-              {t('copy_key', 'Copy Key')}
-            </Button>
-          )}
+        <div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
+          <div className="flex items-center">
+            {reveal2 ? (
+              `${backendUrl}/mcp/` + user.publicApi
+            ) : (
+              <>
+                <div className="blur-sm">
+                  {(`${backendUrl}/mcp/` + user.publicApi).slice(0, -5)}
+                </div>
+                <div>{(`${backendUrl}/mcp/` + user.publicApi).slice(-5)}</div>
+              </>
+            )}
+          </div>
+          <div>
+            {!reveal2 ? (
+              <Button onClick={() => setReveal2(true)}>
+                {t('reveal', 'Reveal')}
+              </Button>
+            ) : (
+              <Button onClick={copyToClipboard2}>
+                {t('copy_key', 'Copy Key')}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col">
+        <h3 className="text-[20px]">Building your Postiz payload</h3>
+        <div className="text-customColor18 mt-[4px] whitespace-pre-line">
+          Sending a POST request to <strong className="text-textColor">/posts</strong> might feel a bit overwhelming as many
+          platforms have different requirements.{'\n'}
+          We have created an easy way to build your Postiz payload to schedule
+          posts. {'\n'}
+          You can use the Postiz wizard, and schedule a post with our UI, after
+          you added all your text and settings, the wizard will generate the
+          payload for you.{'\n'}
+        </div>
+        <div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
+          <Button onClick={() => window.open(`${frontEndUrl}/modal/dark/all`, '_blank')}>
+            Open the payload wizard
+          </Button>
         </div>
       </div>
     </div>