feat: payload wizard
This commit is contained in:
Nevo David
parent
cd085e27ca
commit
9e0eff7e5a
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue