feat: onboarding

This commit is contained in:
Nevo David 2026-01-23 16:37:28 +07:00
parent ba7fc7a8e8
commit 43ced2e7b6
20 changed files with 282 additions and 28 deletions

View file

@ -430,7 +430,7 @@ export const AddProviderComponent: FC<{
return (
<div className="w-full flex flex-col gap-[20px] rounded-[4px] relative]">
<div className="flex flex-col">
<div className={clsx("grid grid-cols-5 gap-[10px] justify-items-center justify-center", onboarding ? 'grid-cols-8' : 'grid-cols-5')}>
<div className={clsx("grid grid-cols-5 gap-[10px] justify-items-center justify-center", onboarding ? 'grid-cols-9' : 'grid-cols-5')}>
{social.map((item) => (
<div
key={item.identifier}

View file

@ -457,7 +457,7 @@ export const LaunchesComponent = () => {
return;
}
if (search.get('msg')) {
toast.show(search.get('msg')!, 'warning');
toast.show(search.get('msg')!, 'success');
window?.opener?.postMessage(
{
msg: search.get('msg')!,

View file

@ -6,9 +6,9 @@ import useSWR from 'swr';
import { orderBy } from 'lodash';
import clsx from 'clsx';
import Image from 'next/image';
import { Button } from '@gitroom/react/form/button';
import { AddProviderComponent } from '@gitroom/frontend/components/launches/add.provider.component';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
interface OnboardingModalProps {
onClose: () => void;
@ -16,11 +16,35 @@ interface OnboardingModalProps {
export const OnboardingModal: FC<OnboardingModalProps> = ({ onClose }) => {
const [step, setStep] = useState(1);
const modals = useModals();
const t = useT();
return (
<div className="w-full min-h-full flex-1 p-[40px] flex relative">
<div className="flex flex-1 bg-newBgColorInner rounded-[20px] flex-col">
<style>
{`#support-discord {display: none}`}
</style>
<div className="flex flex-1 bg-newBgColorInner rounded-[20px] flex-col relative">
<button
className="outline-none absolute end-[20px] top-[20px] mantine-UnstyledButton-root mantine-ActionIcon-root hover:bg-tableBorder cursor-pointer mantine-Modal-close mantine-1dcetaa"
type="button"
onClick={modals.closeAll}
>
<svg
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
>
<path
d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
></path>
</svg>
</button>
<div className="flex-1 flex p-[40px]">
<div className="flex flex-col gap-[24px] flex-1">
{/* Step indicators */}
@ -174,7 +198,7 @@ const OnboardingStep1: FC<{ onNext: () => void; onSkip: () => void }> = ({
{/* Available platforms - using AddProviderComponent */}
<div className="flex flex-col gap-[12px]">
<div className="text-[14px] font-medium">
{t('add_more_channels', 'Add More Channels')}
{t('click_channel_to_add', 'Click a channel to add it')}
</div>
{data && (
<AddProviderComponent
@ -186,12 +210,30 @@ const OnboardingStep1: FC<{ onNext: () => void; onSkip: () => void }> = ({
</div>
{/* Action buttons */}
<div className="flex justify-end pt-[16px]">
<Button onClick={onNext}>
<div className="flex justify-end pt-[24px] mt-[8px]">
<button
onClick={onNext}
className="group flex items-center gap-[12px] bg-gradient-to-r from-[#622aff] to-[#8b5cf6] hover:from-[#7c3aff] hover:to-[#9d6eff] text-white font-semibold px-[32px] py-[14px] rounded-[12px] text-[16px] transition-all shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40"
>
{sortedIntegrations.length > 0
? t('continue', 'Continue')
: t('continue_without_channels', 'Continue without channels')}
</Button>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="group-hover:translate-x-1 transition-transform"
>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
</button>
</div>
</div>
);
@ -231,14 +273,49 @@ const OnboardingStep2: FC<{ onBack: () => void; onFinish: () => void }> = ({
</div>
{/* Action buttons */}
<div className="flex justify-between pt-[16px]">
<Button
className="bg-transparent border border-customColor47 hover:bg-customColor47/30"
<div className="flex justify-between pt-[24px] mt-[8px]">
<button
onClick={onBack}
className="group flex items-center gap-[8px] bg-transparent border-2 border-customColor47 hover:border-white/50 hover:bg-white/5 text-white/80 hover:text-white font-medium px-[24px] py-[12px] rounded-[12px] text-[15px] transition-all"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="group-hover:-translate-x-1 transition-transform"
>
<path d="m12 19-7-7 7-7" />
<path d="M19 12H5" />
</svg>
{t('back', 'Back')}
</Button>
<Button onClick={onFinish}>{t('get_started', 'Get Started')}</Button>
</button>
<button
onClick={onFinish}
className="group flex items-center gap-[12px] bg-gradient-to-r from-[#10b981] to-[#059669] hover:from-[#34d399] hover:to-[#10b981] text-white font-semibold px-[32px] py-[14px] rounded-[12px] text-[16px] transition-all shadow-lg shadow-emerald-500/25 hover:shadow-emerald-500/40"
>
{t('get_started', 'Get Started')}
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="group-hover:scale-110 transition-transform"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
<polyline points="22 4 12 14.01 9 11.01" />
</svg>
</button>
</div>
</div>
);

View file

@ -36,6 +36,7 @@ export const Onboarding: FC = () => {
withCloseButton: true,
closeOnEscape: false,
removeLayout: true,
askClose: true,
fullScreen: true,
onClose: handleClose,
children: <OnboardingModal onClose={handleClose} />,

View file

@ -686,3 +686,14 @@ checksums:
drop_files_here_to_upload: a7971302d02a19a461c519cffedfa5e5
insert_emoji: 6e2ab0e239c0ee87d385b1cd17185e00
write_something: bc9257cede62880c411001e61310ca43
click_channel_to_add: 7dc67c45eba252d1fa931e5a101d568b
connect_your_channels: a8303310a9cc5f4e11510f8f55c0978d
connect_social_media_to_start: 8210aba8fa40ae5cdf23d78bd0ea53a4
connected_channels: b64d400364bb3ccb4b1d4b547673f4c3
continue: 3cfba90b4600131e82fc4260c568d044
continue_without_channels: fa9c2e19c59e2eac86c1fcac35611337
watch_tutorial: 7f202b82c805285109187f099d22e863
watch_tutorial_title: c3c0d814f10a3325a7fd52a7fb44ae38
watch_tutorial_description: 25dd65235d9603f6d65d62f953791722
back: f541015a827e37cb3b1234e56bc2aa3c
get_started: 1d5f030c4ec9c869e647ae060518b948

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "حذف المنشور",
"drop_files_here_to_upload": "أسقط ملفاتك هنا للتحميل",
"insert_emoji": "إدراج رمز تعبيري",
"write_something": "اكتب شيئًا …"
"write_something": "اكتب شيئًا …",
"click_channel_to_add": "انقر على قناة لإضافتها",
"connect_your_channels": "قم بتوصيل قنواتك",
"connect_social_media_to_start": "قم بتوصيل حسابات التواصل الاجتماعي لبدء جدولة المنشورات",
"connected_channels": "القنوات المتصلة",
"continue": "متابعة",
"continue_without_channels": "متابعة بدون قنوات",
"watch_tutorial": "مشاهدة الدليل",
"watch_tutorial_title": "تعلم كيفية استخدام Postiz",
"watch_tutorial_description": "شاهد هذا الفيديو القصير لتتعلم كيف تستفيد من Postiz بأفضل شكل",
"back": "رجوع",
"get_started": "ابدأ"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "পোস্ট মুছুন",
"drop_files_here_to_upload": "আপলোড করতে আপনার ফাইলগুলো এখানে ছেড়ে দিন",
"insert_emoji": "ইমোজি যুক্ত করুন",
"write_something": "কিছু লিখুন …"
"write_something": "কিছু লিখুন …",
"click_channel_to_add": "যোগ করার জন্য একটি চ্যানেলে ক্লিক করুন",
"connect_your_channels": "আপনার চ্যানেলগুলি সংযোগ করুন",
"connect_social_media_to_start": "পোস্ট নির্ধারণ করতে শুরু করতে আপনার সামাজিক মাধ্যম অ্যাকাউন্ট সংযোগ করুন",
"connected_channels": "সংযুক্ত চ্যানেলসমূহ",
"continue": "চালিয়ে যান",
"continue_without_channels": "চ্যানেল ছাড়াই চালিয়ে যান",
"watch_tutorial": "টিউটোরিয়াল দেখুন",
"watch_tutorial_title": "Postiz ব্যবহারের উপায় শিখুন",
"watch_tutorial_description": "Postiz সর্বোচ্চভাবে কাজে লাগাতে এই সংক্ষিপ্ত ভিডিওটি দেখুন",
"back": "পেছনে যান",
"get_started": "শুরু করুন"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "Beitrag löschen",
"drop_files_here_to_upload": "Dateien hierher ziehen, um sie hochzuladen",
"insert_emoji": "Emoji einfügen",
"write_something": "Schreibe etwas …"
"write_something": "Schreibe etwas …",
"click_channel_to_add": "Klicke auf einen Kanal, um ihn hinzuzufügen",
"connect_your_channels": "Verbinde deine Kanäle",
"connect_social_media_to_start": "Verbinde deine Social-Media-Konten, um mit der Planung von Beiträgen zu beginnen",
"connected_channels": "Verbundene Kanäle",
"continue": "Weiter",
"continue_without_channels": "Ohne Kanäle fortfahren",
"watch_tutorial": "Tutorial ansehen",
"watch_tutorial_title": "Lerne, wie du Postiz benutzt",
"watch_tutorial_description": "Sieh dir dieses kurze Video an, um das Beste aus Postiz herauszuholen",
"back": "Zurück",
"get_started": "Loslegen"
}

View file

@ -683,5 +683,16 @@
"delete_post_tooltip": "Delete Post",
"drop_files_here_to_upload": "Drop your files here to upload",
"insert_emoji": "Insert Emoji",
"write_something": "Write something …"
"write_something": "Write something …",
"click_channel_to_add": "Click a channel to add it",
"connect_your_channels": "Connect Your Channels",
"connect_social_media_to_start": "Connect your social media accounts to start scheduling posts",
"connected_channels": "Connected Channels",
"continue": "Continue",
"continue_without_channels": "Continue without channels",
"watch_tutorial": "Watch Tutorial",
"watch_tutorial_title": "Learn How to Use Postiz",
"watch_tutorial_description": "Watch this short video to learn how to get the most out of Postiz",
"back": "Back",
"get_started": "Get Started"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "Eliminar publicación",
"drop_files_here_to_upload": "Suelta tus archivos aquí para subirlos",
"insert_emoji": "Insertar emoji",
"write_something": "Escribe algo…"
"write_something": "Escribe algo…",
"click_channel_to_add": "Haz clic en un canal para agregarlo",
"connect_your_channels": "Conecta tus canales",
"connect_social_media_to_start": "Conecta tus cuentas de redes sociales para empezar a programar publicaciones",
"connected_channels": "Canales conectados",
"continue": "Continuar",
"continue_without_channels": "Continuar sin canales",
"watch_tutorial": "Ver tutorial",
"watch_tutorial_title": "Aprende a usar Postiz",
"watch_tutorial_description": "Mira este breve video para aprender a sacar el máximo provecho de Postiz",
"back": "Atrás",
"get_started": "Comenzar"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "Supprimer la publication",
"drop_files_here_to_upload": "Déposez vos fichiers ici pour les télécharger",
"insert_emoji": "Insérer un emoji",
"write_something": "Écrivez quelque chose…"
"write_something": "Écrivez quelque chose…",
"click_channel_to_add": "Cliquez sur un canal pour l'ajouter",
"connect_your_channels": "Connectez vos canaux",
"connect_social_media_to_start": "Connectez vos comptes de réseaux sociaux pour commencer à programmer des publications",
"connected_channels": "Canaux connectés",
"continue": "Continuer",
"continue_without_channels": "Continuer sans canaux",
"watch_tutorial": "Regarder le tutoriel",
"watch_tutorial_title": "Apprenez à utiliser Postiz",
"watch_tutorial_description": "Regardez cette courte vidéo pour apprendre à tirer le meilleur parti de Postiz",
"back": "Retour",
"get_started": "Commencer"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "מחק פוסט",
"drop_files_here_to_upload": "גרור קבצים לכאן להעלאה",
"insert_emoji": "הוסף אימוג'י",
"write_something": "כתוב משהו…"
"write_something": "כתוב משהו…",
"click_channel_to_add": "לחץ על ערוץ כדי להוסיף אותו",
"connect_your_channels": "חבר את הערוצים שלך",
"connect_social_media_to_start": "חבר את חשבונות המדיה החברתית שלך כדי להתחיל לקבוע פוסטים",
"connected_channels": "ערוצים מחוברים",
"continue": "המשך",
"continue_without_channels": "המשך ללא ערוצים",
"watch_tutorial": "צפה במדריך",
"watch_tutorial_title": "למד כיצד להשתמש ב-Postiz",
"watch_tutorial_description": "צפה בסרטון הקצר הזה ולמד כיצד להפיק את המרב מ-Postiz",
"back": "חזרה",
"get_started": "התחלה"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "Elimina post",
"drop_files_here_to_upload": "Trascina qui i tuoi file per caricarli",
"insert_emoji": "Inserisci emoji",
"write_something": "Scrivi qualcosa…"
"write_something": "Scrivi qualcosa…",
"click_channel_to_add": "Clicca su un canale per aggiungerlo",
"connect_your_channels": "Collega i tuoi canali",
"connect_social_media_to_start": "Collega i tuoi account social per iniziare a programmare i post",
"connected_channels": "Canali collegati",
"continue": "Continua",
"continue_without_channels": "Continua senza canali",
"watch_tutorial": "Guarda il tutorial",
"watch_tutorial_title": "Scopri come usare Postiz",
"watch_tutorial_description": "Guarda questo breve video per imparare a sfruttare al meglio Postiz",
"back": "Indietro",
"get_started": "Inizia"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "投稿を削除",
"drop_files_here_to_upload": "ここにファイルをドロップしてアップロード",
"insert_emoji": "絵文字を挿入",
"write_something": "何かを書いてください…"
"write_something": "何かを書いてください…",
"click_channel_to_add": "追加するチャンネルをクリック",
"connect_your_channels": "チャンネルを接続する",
"connect_social_media_to_start": "ソーシャルメディアアカウントを接続して投稿の予約を始めましょう",
"connected_channels": "接続済みチャンネル",
"continue": "続行",
"continue_without_channels": "チャンネルなしで続行",
"watch_tutorial": "チュートリアルを見る",
"watch_tutorial_title": "Postizの使い方を学ぶ",
"watch_tutorial_description": "この短い動画を見て、Postizを最大限に活用する方法を学びましょう",
"back": "戻る",
"get_started": "開始"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "게시물 삭제",
"drop_files_here_to_upload": "여기에 파일을 끌어다 놓아 업로드하세요",
"insert_emoji": "이모지 삽입",
"write_something": "무엇인가를 작성하세요 …"
"write_something": "무엇인가를 작성하세요 …",
"click_channel_to_add": "채널을 추가하려면 클릭하세요",
"connect_your_channels": "채널 연결하기",
"connect_social_media_to_start": "게시물 예약을 시작하려면 소셜 미디어 계정을 연결하세요",
"connected_channels": "연결된 채널",
"continue": "계속하기",
"continue_without_channels": "채널 없이 계속하기",
"watch_tutorial": "튜토리얼 보기",
"watch_tutorial_title": "Postiz 사용법 배우기",
"watch_tutorial_description": "이 짧은 영상을 통해 Postiz를 최대한 활용하는 방법을 알아보세요",
"back": "뒤로가기",
"get_started": "시작하기"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "Excluir postagem",
"drop_files_here_to_upload": "Solte seus arquivos aqui para fazer upload",
"insert_emoji": "Inserir emoji",
"write_something": "Escreva algo…"
"write_something": "Escreva algo…",
"click_channel_to_add": "Clique em um canal para adicionar",
"connect_your_channels": "Conecte seus canais",
"connect_social_media_to_start": "Conecte suas contas de redes sociais para começar a agendar posts",
"connected_channels": "Canais conectados",
"continue": "Continuar",
"continue_without_channels": "Continuar sem canais",
"watch_tutorial": "Assistir ao tutorial",
"watch_tutorial_title": "Aprenda a usar o Postiz",
"watch_tutorial_description": "Assista a este vídeo curto para aprender a tirar o máximo proveito do Postiz",
"back": "Voltar",
"get_started": "Começar"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "Удалить публикацию",
"drop_files_here_to_upload": "Перетащите файлы сюда для загрузки",
"insert_emoji": "Вставить эмодзи",
"write_something": "Напишите что-нибудь …"
"write_something": "Напишите что-нибудь …",
"click_channel_to_add": "Нажмите на канал, чтобы добавить его",
"connect_your_channels": "Подключите ваши каналы",
"connect_social_media_to_start": "Подключите свои аккаунты в социальных сетях, чтобы начать планировать публикации",
"connected_channels": "Подключенные каналы",
"continue": "Продолжить",
"continue_without_channels": "Продолжить без каналов",
"watch_tutorial": "Смотреть обучение",
"watch_tutorial_title": "Узнайте, как пользоваться Postiz",
"watch_tutorial_description": "Посмотрите это короткое видео, чтобы узнать, как получить максимум от Postiz",
"back": "Назад",
"get_started": "Начать"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "Gönderiyi Sil",
"drop_files_here_to_upload": "Yüklemek için dosyalarınızı buraya bırakın",
"insert_emoji": "Emoji Ekle",
"write_something": "Bir şeyler yazın …"
"write_something": "Bir şeyler yazın …",
"click_channel_to_add": "Eklemek için bir kanal seçin",
"connect_your_channels": "Kanallarınızı Bağlayın",
"connect_social_media_to_start": "Gönderi planlamaya başlamak için sosyal medya hesaplarınızı bağlayın",
"connected_channels": "Bağlı Kanallar",
"continue": "Devam Et",
"continue_without_channels": "Kanallar olmadan devam et",
"watch_tutorial": "Eğitimi İzle",
"watch_tutorial_title": "Postiz'i Nasıl Kullanacağınızı Öğrenin",
"watch_tutorial_description": "Postiz'den en iyi şekilde yararlanmayı öğrenmek için bu kısa videoyu izleyin",
"back": "Geri",
"get_started": "Başlayın"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "Xóa bài đăng",
"drop_files_here_to_upload": "Kéo thả tệp vào đây để tải lên",
"insert_emoji": "Chèn biểu tượng cảm xúc",
"write_something": "Viết gì đó …"
"write_something": "Viết gì đó …",
"click_channel_to_add": "Nhấp vào kênh để thêm",
"connect_your_channels": "Kết nối các kênh của bạn",
"connect_social_media_to_start": "Kết nối tài khoản mạng xã hội của bạn để bắt đầu lên lịch đăng bài",
"connected_channels": "Các kênh đã kết nối",
"continue": "Tiếp tục",
"continue_without_channels": "Tiếp tục mà không có kênh",
"watch_tutorial": "Xem hướng dẫn",
"watch_tutorial_title": "Tìm hiểu cách sử dụng Postiz",
"watch_tutorial_description": "Xem video ngắn này để biết cách tận dụng tối đa Postiz",
"back": "Quay lại",
"get_started": "Bắt đầu"
}

View file

@ -681,5 +681,16 @@
"delete_post_tooltip": "删除帖子",
"drop_files_here_to_upload": "将文件拖到此处以上传",
"insert_emoji": "插入表情",
"write_something": "写点什么…"
"write_something": "写点什么…",
"click_channel_to_add": "点击频道以添加",
"connect_your_channels": "连接你的频道",
"connect_social_media_to_start": "连接你的社交媒体账户以开始安排发布",
"connected_channels": "已连接频道",
"continue": "继续",
"continue_without_channels": "继续但不添加频道",
"watch_tutorial": "观看教程",
"watch_tutorial_title": "学习如何使用Postiz",
"watch_tutorial_description": "观看这个简短的视频学习如何最大程度地利用Postiz",
"back": "返回",
"get_started": "开始使用"
}